水平行数量未知

Question

我希望创建X个不同的水平浮动行。 （见图片。）我遇到的问题是我无法设置容器的宽度，因为我不确切知道要添加多少行。

目前我有这个：

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