html - 使用 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-->

因此，如果我们从数学 Angular 考虑:该行始终将其自身的大小设为 12，因此我们的 col-md-6 将始终动态缩放到行宽的 50%(6 是 12 的 50%)，而我们的两个较小的列将始终动态缩放到行宽的 25%(3 是 12 的 25%)。

这是一个生成引导 html 代码片段的好工具

Layitout.com

在这里你可以找到你可能需要的所有 Bootstrap 资源

GetBootStrap

获取他们的 CSS 是最好的起点，您可以直接从他们的网站链接到 CSS href。

玩得开心。