css - CSS处理div溢出

Question

我有 2 个 div 的问题。

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

我的问题是，当您调整浏览器窗口的大小时，数据描述会低于缩略图。我添加了 min-width 但没有结果。也许我在错误的地方添加它。

非常感谢。

http://jsfiddle.net/NzX9e/

Answer 1

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

对于这种特定情况：http: //jsfiddle.net/NzX9e/7/

基本上，你浮动包含 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'
}

我不打算通过并清理所有的标记和样式，只是说你有比需要的更多的东西。对于您要完成的工作，可能会增加一倍以上。少即是多。:)

Answer 2

jsFiddle：http: //jsfiddle.net/NzX9e/11/

变化包括：

删除边距顶部：

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

Answer 3

好吧，我刚刚将 95% 的宽度修改为 94%，它就像一个魅力。我希望问题可以保持开放，看看是否有更好的解决方案。