使用css将对象动态调整为相等的列

Question

我正在尝试创建一个布局，该布局会自动重新调整容器的宽度以适应父级的剩余空间。有点像这样：

数据将从数据库加载，但我不确定这是怎么做的。我尝试重新创建此布局，然后从数据库加载对象，但无法确定如何在每行上创建最后一个容器以填充剩余空间。

CSS：

ul,li{
    list-style:none;
}
ul{
    width:1000px;
    display:block;
    height:auto;
}
li{
    float:left;
    margin:10px;
    background:red;
    height:150px;
    display:block;
}

简单循环：

for($x = 0; $x < 20; $x++){
    echo '<li style="width:'.rand(150,400).'px"></li>';
}

如果有人能够解释一种方法，我可以动态调整每行的最后一个容器以使其齐平，我将非常感激。但我不想使用模板或插件，因为我宁愿学习如何从头开始构建它。

Answer 1

Bootstrap绝对是你最好的选择。 Bootstrap是一个使用div的网格布局，并且使用权是完全响应的。

例如，如果您想要更宽的列和两个更小的列，您可以这样做：

<div class="row"><!--always size of 12 in bootstrap-->
  <div class="col-md-6">
   wider column content in here
  </div>
  <div class="col-md-3">
   smaller first column content in here
  </div>
  <div class="col-md-3">
   smaller second column content in here
  </div>
</div><!--end row div-->

因此，如果我们以数学方式进行处理：行总是将其自身的大小设置为12，因此我们的col-md-6将始终动态扩展到行宽的50％（6是12的50％）和我们的两个较小的列总是动态缩放到行宽的25％（3是12％的25％）。

这是一个用于生成bootstrap html代码片段的好工具

Layitout.com

在这里，您可以找到您可能需要的所有引导资源

GetBootStrap

抓住他们的CSS是最好的起点，你可以直接从他们的网站链接到CSS href。

玩得开心。