Question

我希望使用基于浮动的行（固定宽度）布置我的页面，当每行有三个div（每个宽度为33％）时。我是否必须包含每一行 - 在另一个“行”div中（假设我用一个div扭曲 - 所有行）？

根据我的理解，只有当每个“33％div”具有不同的高度时，或者如果我希望某些行包含少于三个“33％div”时，才需要“行div”...（对于示例 - 包含两个项目和一些空白区域的行...）。

总之 - 如果我的所有行包含三个宽度为33％的div，并且它们都是相同的高度 - 那么我不需要为行添加包含div？

感谢。

Answer 1

假设这是你想要的

<html>
<head>
    <title></title>
    <style rel="stylesheet" type="text/css">

        #container{
            position:relative;
        }

        .row{
            float: left;
            clear: both;
            width: 100%;
        }

        .row > div{
            width: 33%;
            float: left;
        }

        .row:nth-child(even){
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div>foo</div>
            <div>bar<br/>big</div>
            <div>baz</div>
        </div>
        <div class="row">
            <div>foo</div>
            <div>bar<br/>another<br/>big<br/>one</div>
            <div>baz</div>
        </div>
        <div class="row">
            <div>foo</div>
            <div>shizzle<br/>for<br/>my<br/>nizzle</div>
            <div>baz</div>
        </div>
    </div>
</body>
</html>

确保容器的位置为：relative，因此宽度百分比基于容器宽度。并且明确：在每个新行上都是（或仅留下那个问题）。

如果你问是否可以将div.row从它中删除，你可以，如果你清除每行的第一个元素，但是当你在单元格上使用backgroundcolors时会遇到麻烦。

希望这会有所帮助

Answer 2

如果您使用inline-block而不是浮点数会更好，原因如下：

如果您使用包装div作为1/3宽度单元格，那么如果您使用浮动，则包装div将被折叠。
如果细胞具有不同的高度（你提到它们的高度相同，但万一它们不是这样），那么浮子会产生一种非常糟糕的混合对齐，整个事情只会是一场大灾难。

另一方面，如果你使用它，事情会更清晰，更容易扩展。包装div也不会崩溃：

.cell {
  display: inline-block;
  vertical-align: middle; // or top/bottom. depends on your taste :)
  width: 33%;
}

在基于浮动的布局中划分行 - 何时需要？

2 个答案: