css - 灵活的 CSS 列

Question

我正在寻找一种解决方案，其中列表中的一堆相同大小的图像将在一个灵活的列中排序，如布局：

 _  _  _  __  __  __
|1||4||7||10||13||16|
 _  _  _  __  __  __
|2||5||8||11||14||17|
 _  _  _  __  __  __
|3||6||9||12||15||18|

容器的宽度应该是灵活的，以便它可以水平扩展。该解决方案只需要在尖端浏览器中工作。

Answer 1

我给你的礼物...

.cols {
  margin:30px -1em -30px 0;
  padding:0;
  text-align:left;
  overflow:visible !important;
  zoom:1;
}
.cols + * {
    clear: both;
}
.cols:before {
  content:'';
  display:block;
}
.cols:after {
  content:'';
  display:table;
  clear:both;
}
.cols .break {
  width:100% !important;
  clear:both;
  height:0;
  padding:0;
  display:none;
}
.cols > li {
  margin:0 0 30px 0;
  padding:0 1em 0 0;
  list-style:none;
  float:left;
  display:block;
  position:relative;
}
.cols > li > *:first-child { margin-top:0; }
.cols > li > *:last-child { margin-bottom:0; }
.cols > li > ul:last-child { margin-bottom:-30px; }
.cols.boxxes > li, .cols.image-strip li { margin:0 0 1em 0; }
.cols.boxxes > li:last-child, .cols.image-strip li:last-child { margin:0 0 30px 0; }
.cols.with2 > li { width:50%; }
.cols.with2 > li.take2 { width:100%; }
.cols.with3 > li { width:33.3333%; }
.cols.with3 > li.take2 { width:66.6666%; }
.cols.with3 > li.take3 { width:100%; }
.cols.with4 > li { width:25%; }
.cols.with4 > li.take2 { width:50%; }
.cols.with4 > li.take3 { width:75%; }
.cols.with4 > li.take4 { width:100%; }
.cols.with5 > li { width:20%; }
.cols.with5 > li.take2 { width:40%; }
.cols.with5 > li.take3 { width:60%; }
.cols.with5 > li.take4 { width:80%; }
.cols.with5 > li.take5 { width:100%; }
.cols.with6 > li { width:16.6666%; }
.cols.with6 > li.take2 { width:33.3333%; }
.cols.with6 > li.take3 { width:50%; }
.cols.with6 > li.take4 { width:66.6666%; }
.cols.with6 > li.take5 { width:83.3333%; }
.cols.with6 > li.take6 { width:100%; }

设置成这样...

/* 5 cols */
<ul class="cols with5">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

/* 3 cols 3/5, 1/5, 1/5*/
<ul class="cols with5">
    <li class="take3">...</li>
    <li>...</li>
    <li>...</li>
</ul>

/* 等等 */

你可以用它做大约 40 种不同的液柱。

Answer 2

好吧，似乎 CSS多列布局正是我所需要的。