2

質問は

<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
<li>test11</li>
<li>test12</li>
</ul>

はこんな感じです...そして結果は

test1   test2    test3
test4   test5    test6
test7   test7    test9
test10   test12    test12

そして、私はこのようにそれを好みます:P

test1   test5    test9
test2   test6    test10
test3   test7    test11
test4   test8    test12

それで、みんなそれは可能ですか？

4

3 に答える 3

2

必要な結果を得るために使用できMultiple CSS3 column-count Propertyます。要件のコードを参照してください:-

HTML

<ul class="three-col">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
<li>test11</li>
<li>test12</li>
</ul>

CSS

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
       list-style-type:none;
}

これも役立つと思います:- http://tinkerbin.com/KLNj5ghL

于 2012-09-17T07:09:27.130 に答える
0

css3こんにちは、プロパティ に慣れることができますcolumn-count

CSS

ul{
list-style:none;
}
li{
border-bottom:solid 1px red;
}

ul
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

ライブデモ

より詳しい情報

于 2012-09-17T07:00:37.677 に答える
0

Rohit Azadによる優れたソリューション

しかし、IE 6-9 は CSS3 列をサポートしていません... 完全なブラウザー サポートが必要な場合は、(少し醜いですが...) このバージョンを使用できます...

HTML:

<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
<ul>
<li>test9</li>
<li>test10</li>
<li>test11</li>
<li>test12</li>
</ul>

CSS:

ul
{
  border:1px solid black;
  float: left;
  width: 100px;
  list-style:none;
}

グリーズ

于 2012-09-17T07:36:41.013 に答える