Question

我在Dabblet这里有一段代码：http://dabblet.com/gist/5705036

即使在不使用绝对定位的情况下重新调整浏览器的大小，我也想让这些片段保持在他们的位置。例如，当浏览器重新调整大小时，主内容容器会打破一个新行[我在大多数容器中使用CSS Floats]。

我的编码有问题吗？

是否适合布局？或者我需要使用其他任何东西？..

我无法自己解决这个问题，并且做了大量的研究，但仍然没有一个好主意用它来解决这个问题。 [另外，我使用HTML5标签，例如：section，article，nav等。]

Answer 1

只需从float:left; maincontent移除id即可应用display:table-cell;。您的问题将得到解决。

这是代码。

#maincontent {
    border: 1px solid #BBBBBB;
    border-radius: 5px 5px 5px 5px;
    display: table-cell;
    margin-top: 15px;
    min-height: 400px;
    padding: 2px 6px;
    width: 700px;
}

希望这有帮助。

Answer 2

首先，如果在父元素中使用浮点数，则应始终清除父元素。你的右边元素因为没有容器的最小宽度而下降，这是代码示例：

#contentWrapper {
    width: 1000px;
    overflow: hidden; /*scroll / auto it's depends on You */
}

Answer 3

我注意到在你的代码中，你在<div id="contentWrapper ">中有一个空格，它阻止你的CSS出现该元素。此外，#contentWrapper还需要2个宽度像素。

#contentWrapper {
    width: 992px;
}

删除空间并更改#contentWrapper的宽度对我有用。我快速浏览了一下数学，但没有弄清楚为什么它需要992px。任何人吗？

所以，在回答你的问题时，我会说花车很好而且你的方法很好，只有那两个小错误。

停止CSS浮动溢出

3 个答案: