html - 数量未知的水平行

Question

我希望创建 X 个水平 float 的不同行。 (见图片。)我遇到的问题是我无法设置容器的宽度，因为我不知道将添加多少行。

目前我有这个:

HTML:

<div class="container">                  
            <div class="row">
                Lots of content
            </div>
            <div class="row">
                Lots of content
            </div>
            <div class="row">
                Lots of content
            </div>
            <div class="row">
                Lots of content
            </div>
        </div>

CSS:

.row  {
    float:left;
    width:23%;
    margin-left:1%;
    margin-right:1%;
    background-color:#252525;
    height:500px;
    color:white;
}

.container {
    width:500%;
}

每次添加或删除新行时，都需要更改容器的宽度。有什么办法可以解决吗？

Answer 1

您应该能够使用“flex”。

CSS:

.row {
  flex: 1;
}

.container {
  display: flex;
}

参见 http://www.w3schools.com/cssref/css3_pr_flex.asp 和 http://www.w3schools.com/cssref/pr_class_display.asp