Css 基于浮点布局的行的div-需要时？_Css_Css Float

Css 基于浮点布局的行的div-需要时？

css

Css 基于浮点布局的行的div-需要时？,css,css-float,Css,Css Float,当每行有三个div（每个33%的宽度）时，我想用基于浮动的行（固定宽度）布局我的页面。我是否必须在另一个“行”div中包含每一行（假设我使用一个div扭曲所有行）据我所知，仅当每个“33%div”具有不同的高度时，或者如果我希望某些行包含少于三个“33%div”…（例如，一行包含两个项目和一些空白区域…）时，才需要“rows div” 总之，如果我所有的行都包含三个33%宽度的div，并且它们的高度都相同，那么我就不需要为行添加包含div的div了谢谢。假设这是你想要的 <html&

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

据我所知，仅当每个“33%div”具有不同的高度时，或者如果我希望某些行包含少于三个“33%div”…（例如，一行包含两个项目和一些空白区域…）时，才需要“rows div”

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

谢谢。

假设这是你想要的

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


#容器{
位置：相对位置；
}
.行{
浮动：左；
明确：两者皆有；
宽度：100%；
}
.行>分区{
宽度：33%；
浮动：左；
}
.行：第n个子项（偶数）{
背景颜色：粉红色；
}
福
吧台
大
巴兹
福
吧台
另一个
大的
一个
巴兹
福
为
我的
尼兹勒洗衣服
巴兹

确保容器的位置为：relative，因此宽度百分比基于该容器的宽度。而且很清楚：每一行上都有两个（或者只留下一个）

如果您询问是否可以不使用div.row，您可以，如果您清除每行的第一个元素，但是在单元格本身上使用背景色时，这会给您带来麻烦

希望这对您有所帮助，如果您使用

内联块

而不是float，效果会更好，原因如下：

如果对1/3宽度的单元格使用换行div，则如果使用浮动，换行div将折叠

如果单元格有不同的高度（你提到过它们的高度是相同的，但以防万一它们不是），那么浮动将产生一种非常糟糕的混乱排列，整个事情将是一场大灾难另一方面，如果你使用这个，事情会更干净，更容易扩展。此外，包装div不会折叠：

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

不，您不需要div来包装行。是的，我同意，如果只有一行，您可以不包装行，但这很危险，我会包装它，以确保1）可读性和2）可伸缩性。您同意吗？否批准pheads up：我不是css专家，但这可能会在某些浏览器中失败。1-如果每个单元格的高度相同-我想我不需要使用clear，如果我没有错的话，行将自动形成。2-背景色有什么问题？（我仍然会对所有行使用一个容器…）谢谢。1）如果行中每个单元格的高度相同，那么我看不出有问题，但我认为这样做是一种很好的做法。（至少这是我的建议。2）如果它们的高度不同，并且您在单元格而不是行上使用背景色，用户会注意到这一点。当您为行和单元格放置单独的背景色时，您可以使用浮点数注意到“折叠”的div。