CSS处理溢出的div
我有2个div的问题。CSS处理溢出的div
它是一个100%宽度有2个div的盒子。左边是缩略图。正确的是描述。
我的问题是,当您调整浏览器窗口的大小时,数据描述会在缩略图下方显示。我添加了最小宽度但没有结果。也许我把它加在错误的地方。
非常感谢。
如果希望事物在缩放窗口时正常工作,请勿将%值与固定宽度混合。一个div自然会获得父母给它的所有空间。所以你真正需要做的是去掉很多不必要的样式和标记。
对于这个特定的情况下:http://jsfiddle.net/NzX9e/7/
基本上,你浮在div包含IMG和删除它旁边的一个所有其他样式(我加了一些填充它,给它一点未来的喘息空间到图像)。
.docBox {
border: solid 1px #006633;
margin: 10px 0px 0px 10px;
overflow: hidden; <- this acts like a clear to keep the floated div in the parent
}
.previewImgBox {
height: 70px;
width: 50px;
text-align: center;
float: left;
}
.previewData {
padding: 0 0 0 60px;
'all the styles you had here are not needed and cause your problem'
}
我是不是去通过,并清理所有的标记和样式,只是调用它的是,你有很多超过需要。可能比你想要完成的事情多一倍。少即是多。 :)
谢谢,为什么你更喜欢浮动图像而不是2个内联div?我在这方面是新手,这是我不明白的,必须有一个原因。 在预览数据我有溢出:自动,因为我不想固定的高度,并把关键字的滚动条,如果有溢出。在你的小提琴它不工作,如果我添加它...是因为父母有溢出:隐藏? – JorgeeFG 2012-07-19 20:51:34
不确定为什么你想要一个固定的高度,在每个文本块上出现滚动条会很烦人。如果你喜欢,你可以添加它。内联意味着元素大小的内容,你真正想要的是一个盒子布局(在我的经验中最常见)。你会发现用css和html你几乎可以随心所欲地获得东西,但正确的方式将始终导致最干净的解决方案和最少量的代码。我在这里写了一个回应,试图描述推理,但这个领域还不够大。简而言之,发挥元素自然行为的长处。 – Waterboy 2012-07-19 21:27:19
嗯,我只是95%的宽度修改为94%,它的工作就像一个魅力。我希望问题能够保持开放以查看是否有更好的解决方案。
的jsfiddle:http://jsfiddle.net/NzX9e/11/
变化包括:
取出的margin-top:
.previewImgBox .thumb {
/*margin-top: 5px;*/
}
添加高度:
.docBox {
height: 70px;
border: solid 1px #006633;
margin: 10px 0px 0px 10px;
}
添加浮动:左:
.previewData {
height: 70px;
min-width: 95%;
width: 95%;
/*border: solid 1px #00CC33;*/
overflow: auto;
display: inline-block;
float:left;
}
.previewImgBox {
height: 70px;
width: 50px;
/*border: solid 1px #00CC33;*/
text-align: center;
display: inline-block;
float:left;
}
您是否可以将您的示例简化为证明问题所需的最低限度标记?你有这么多元素,我不确定你遇到了哪些问题。 – KatieK 2012-07-19 20:36:04
对不起,这里是:http://jsfiddle.net/NzX9e/6/ – JorgeeFG 2012-07-19 20:38:29