如何防止容器 div 允许内容溢出？

Question

如何防止容器 div 允许内容溢出？

3

好的，下面是一个快速虚构的例子：

<div style="background: #CCC; margin: 10px;">
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>
<div style="width: 600px; height: 400px; background: #999;">Child #2</div>
</div>

如果我将浏览器调整为小于600px宽（子元素＃2），如何停止父div继续缩小到浏览器窗口（并在此过程中缩小子元素＃1）。

实质上，当容器内的最宽子元素达到时，如何防止容器div进一步缩小？

内容是动态的，因此不能指定子元素的宽度，我只设置了子元素＃2的宽度以说明问题。如果有任何特定宽度的元素（例如图像或完全缩小的表格等），则情况相同。

- Leo

2个回答

0

受NickLarsen周到而完整的回答启发：在您的容器上尝试使用display: table-cell。

- graphicdivine

问题在于这样做将不允许容器扩展到比最宽的子元素更宽。而且这在ie7/6中不起作用。 - Leo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Larsen · Accepted Answer

我不确定您在网页上允许外部元素扩展和收缩，但强制内部设置大小的目的是什么，但我建议首先在外部div上设置“min-width”css属性。这样做会遇到的问题是您现在在两个不同的地方指定了相同的值（对于css2来说，这只是一种生活方式）。

据我所知，没有css属性可以将父元素的宽度限制为其子元素的大小。如果绝对需要该功能，您可以用表格替换外部div，但重新评估设计可能是一个更好的主意。也许如果您能布置更多关于为什么需要这样做的具体内容，我们可以进一步协助。

根据您的评论，您可以尝试像这样做：

<html>
  <head>
    <title>Hi</title>
  </head>
  <body style="margin: 0; padding:0;">
    <table style="background: red;padding:100px;width:100%;" cellspacing="0"><tr><td>
    <table style="background: #CCC; width:100%;border:none;" cellspacing="0"><tr><td>
        <div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>
        <div style="width: 600px; height: 400px; background: #999;">Child #2</div>
    </td></tr></table>
    </td></tr></table>
  </body>
</html>

您必须使用嵌套表格的原因是外部表格可以控制本应为html或body标记的边距/填充。当您将边距应用于body时，它不会影响页面的宽度，并且您始终会在底部看到滚动条。通过嵌套表格并使用填充使外部表格模拟它可以解决这个问题。（其他人可能可以想出更优雅的解决方案）

话虽如此，如果您的容器div仅设置背景颜色，则可以直接设置屏幕的背景颜色。如果您的网页是左对齐的（我的设计师朋友会鄙视我），浏览器窗口会为您处理效果。