CSS 处理 div 溢出

Question

我有 2 个 div 的问题。

它是一个 100% 宽度的盒子，有 2 个 div。左边一个是缩略图。右边一个是描述。

我的问题是，当您调整浏览器窗口大小时，数据描述会显示在缩略图下方。我添加了最小宽度但没有结果。也许我把它添加到了错误的地方。

非常感谢。

http://jsfiddle.net/NzX9e/

Answer 1

如果您希望在缩放窗口时正常工作，请不要将 % 值与固定宽度混合使用。 div 自然会占用父级给它的所有空间。因此，您在这里真正需要做的是删除所有不必要的样式和标记。

对于这个特定案例:http://jsfiddle.net/NzX9e/7/

基本上，您 float 包含 img 的 div 并删除它旁边的所有其他样式(我向它添加了一些填充以在图像旁边为其提供一点呼吸空间)。

.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'
}

我不打算检查和清理所有标记和样式，只是指出您拥有的远远超过需要。对于您要完成的任务，可能会增加一倍以上。少即是多。 :)