CSS处理div溢出答案

【问题标题】：CSS Handling overflow of divCSS处理div溢出
【发布时间】：2012-07-19 20:30:50
【问题描述】：

我有 2 个 div 的问题。

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

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

非常感谢。

http://jsfiddle.net/NzX9e/

【问题讨论】：

你能把你的例子减少到演示问题所需的最低限度的标记吗？你有这么多元素，我不确定你遇到了哪些问题。
是的，对不起，这里是：jsfiddle.net/NzX9e/6

标签： css html window inline

【解决方案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'
}

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

【讨论】：

谢谢，为什么你更喜欢浮动图像而不是 2 个内联 div？我是新手，这是我不明白的，一定是有原因的。在预览数据中，我有溢出：自动，因为我不想固定高度，如果溢出，我会为关键字放置一个滚动条。在你的小提琴中，如果我添加它它就不起作用......是因为父母有溢出：隐藏？
不确定为什么要固定高度，在每个文本块上出现滚动条会很烦人。如果您愿意，可以重新添加它。内联意味着元素对其内容的大小，你真正想要的是一个盒子布局（我的经验中最常见的）。您会发现使用 css 和 html 几乎可以随心所欲地得到一些东西，但正确的方法总是会带来最干净的解决方案和最少的代码量。我在这里写了一个回复，试图描述原因，但这个领域还不够大。简单地说，就是发挥元素自然行为的长处。

【解决方案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;
}

【讨论】：

嗯，它比我的第一个例子更糟糕：P 它在容器 div 之外。
谢谢，可以了。我会问你我在另一个回复中所做的同样的问题：为什么你更喜欢浮动图像而不是 2 个内联 div？更多的是出于好奇。

【解决方案3】：

好吧，我刚刚将 95% 的宽度修改为 94%，效果非常棒。我希望问题可以保持开放，看看是否有更好的解决方案。

【讨论】：