0

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

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

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

谢谢。

4

2 回答 2

0

如果你使用inline-block而不是浮动会更好，原因有几个：

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

另一方面，如果你使用它，事情会更干净，更容易扩展。包装 div 也不会折叠：

.cell {
  display: inline-block;
  vertical-align: middle; // or top/bottom. depends on your taste :)
  width: 33%;
}
于 2013-08-09T18:37:10.803 回答
0

假设这是你想要的

<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>

确保有一个容器位置：相对所以宽度百分比基于该容器宽度。和 clear:both （或仅留下）在每个新行上。

如果您询问是否可以将 div.row 排除在外，如果您清除每行的第一个元素，则可以，但是在单元格本身上使用背景颜色时会遇到麻烦。

希望这可以帮助

于 2013-02-11T18:28:53.753 回答