2

フロートをよりよく理解しようとしています。この問題がわかりません。いくつかのケースで発生しましたが、これは私の最新のものです。2 列の順序なしリストを作成していますが、垂直方向の間隔に問題があります。

<ul>
<li width="50%"> a bunch of text</li>
<li width="50%"> a very large amount of text</li>
<li width="50%"> a small amount of text that does not line up with the first li</li>
</ul>

適切なデモンストレーションについては、コード スニペットを参照してください。

.lists ul{
    width:500px;
}
li{
    width: 40%;
    float:left;
    padding-left:5%;
    padding-right: 5%;
}
<div class="lists">
    <ul>
        <li> <a href="#">harpoons sticking in near his starb</a></li>
         <li><a href="#"> aaalewent milling and milling round so, that my boat's crew could only trim dish, by sitting all thing and milling round so, that my boat's crew could only trim dish, by sitting all theiwent milling and milling round so, that my boat's crew could only trim dish, by sitting all thei, with a milky-white head and </a></li>
    <li><a href="#"> five whales, and my boat fastened to one of them; a regular circus horse he was, too, that r sterns on the outer gunwale. </a></li>
         <li><a href="#"> harpoons sticking in near his starb went milling and milling round so, that my boat's crew could only trim dish, by sitting all thei </a></li>
         <li><a href="#"> m the bottom went milling and milling round so, that my boat's crew could only trim dish, by sitting all theiwent milling and milling round so, that my boat's crew could only trim dish, by sitting all theiof </a></li>
         <li><a href="#"> harpoons sticking in near his starb </a></li>
    </ul>
</div>

1 列目の 1 番目と 2 番目のアイテムの間の縦方向のギャップを削除したいのですが、なぜ存在するのかわかりません。

IE 8 をサポートし、IE7 に向けて努力する必要があります。

4

3 に答える 3

5

<ul>1 つのタグで2 つの列を生成する良い方法は次のとおりです。

デモhttp://jsfiddle.net/kevinPHPkevin/NChgL/1/

div#multiColumn {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

少し前にこれを発見し、それ以来ずっとそれを使用しています。

編集済み

別の解決策は、1 つを左に、もう 1 つを右に、というようにフロート<li>することです (ただし、IE8 以前はサポートされていません)。

デモhttp://jsfiddle.net/kevinPHPkevin/NChgL/3/

li:nth-child(odd) {
    float: right;
}
li:nth-child(even) {
    float: left;
}

ただし、それぞれにクラスを割り当てることができます<li>。1 つは左用、もう 1 つは右用で、上記と同じ効果があります。

于 2013-05-29T18:17:56.303 に答える
0

jquery を使用して、それらを適切に整列させることができます。

これが役立つことを願っています- http://masonry.desandro.com/

IEでも動作します。

于 2013-06-02T10:16:03.593 に答える