1

我在 Dabblet 中有一个代码：http: //dabblet.com/gist/5705036

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

我的编码有问题吗？

浮动是否适合布局？还是我需要使用其他东西？...

我只是无法自己解决它，并且通过大量研究，仍然没有一个好主意来使用它作为解决此问题的方法。[另外，我使用 HTML5 标签，例如：section、article、nav 等。]

4

3 回答 3

1

只需删除float:left;frommaincontent 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;
}

希望这可以帮助。

于 2013-06-04T10:51:44.027 回答
0

首先，如果您在父元素内使用浮动，您应该始终清除父元素。你的右元素下降，因为你没有最小的容器宽度，有代码示例：

#contentWrapper {
    width: 1000px;
    overflow: hidden; /*scroll / auto it's depends on You */
}
于 2013-06-04T11:03:22.447 回答
0

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

#contentWrapper {
    width: 992px;
}

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

所以，在回答你的问题时，我想说浮动很好，你的方法很好，只有那两个小错误。

于 2013-06-07T09:30:46.067 回答