0

現在、未定義の長さ/高さの div がいくつかあります。いくつかのハイパーリンクがリストとして含まれています。これらの div を指定することで、ほぼ望ましい効果が得られます。float:left; width:150px; margin: 10px; ただし、最初の div に 1 つのリンクのみが含まれ、2 番目の div に 10 個のリンクが含まれるシナリオでは、次の結果が得られます (数字は div を表します)。

1  2  5
   3  6
   4  7
8

もちろん、望ましい結果は次のとおりです。

1  3  6          1  4  7
2  4  7    or    2  5  8
   5  8          3  6
4

1 に答える 1

2

3 つの解決策があり、それぞれに問題があります。

まず、すべてのアイテムに高さ制限を設定するか、固定の高さを使用できます。これをオーバーフロー プロパティと組み合わせると、アイテムのきちんとしたグリッドが得られます。

ul li {
    width: 200px;
    height: 200px;
    float: left;
    overflow: hidden;
}

または、s を 3 つの異なるコンテナにプルしてdiv、それぞれ個別にフローティングすることもできます。これにより、3 つの列も得られますが、各列の要素の高さが均等に分散されるように、サーバー側で何かを行う必要があるでしょう。

ul {
    float: left;
    width: 200px;
}

最後に、列をきれいに簡単に作成できる CSS3 列モジュールがありますが、IE ではまったくサポートされていません。

ul {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
}
于 2010-11-08T13:04:27.083 に答える