0

リスト内の同じサイズの画像の束がレイアウトのような柔軟な列に並べられるソリューションを探しています:

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

コンテナーの幅は、水平に拡張できるように柔軟にする必要があります。このソリューションは、最先端のブラウザーでのみ機能する必要があります。

4

2 に答える 2

0

わかりました。CSSの複数列のレイアウトは、私が必要としていることを正確に実行しているようです。

于 2012-11-08T20:39:29.517 に答える
0

あなたへの私の贈り物...

.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 種類の液体カラムを作成できます。

于 2012-11-08T20:45:22.613 に答える