4

幅320pxのdivがあります。それぞれ幅 100px のリスト アイテムを左側にフローティングさせています。次に、各リスト項目の右側に 10px の右マージンを設定します。他のすべてのマージンとパディングは削除されています。

したがって、次の行に進む前に、基本的に行ごとに 3 つのリスト項目が必要です。しかし、3 番目の項目 (つまり、すべての項目) に右マージンがあるため、次の行に移動します (1 行に 2 項目のみ)。

追加のクラスを作成したり、スクリプトを使用したりせずに、このインスタンスで行ごとに 3 つの項目を持つ方法はありますか?

4

6 に答える 6

4

CSS3 セレクターの使用:

ul:nth-child(3n)   { margin-left: 0px; ... }
ul:nth-child(3n+1) { margin-left: 10px; ... }
ul:nth-child(3n+2) { margin-left: 10px; ... }

CSS3 がサポートされていないため、実用的ではない可能性があります。

于 2009-07-10T01:51:09.467 に答える
2

div の幅は 320px である必要がありますか? 最も簡単な解決策は、div の幅を 330px にすることです。コンテナが 320px しかない場合は、 のようなものを使用できますmargin-right: -10px。

于 2009-07-10T01:45:48.753 に答える
0

これがIE6以降で機能するオプションです（おそらくIE5 +-私はそれをテストしていません）。

これは3つのアイテムに対してのみ機能することに注意してください。4番目のアイテムは10pxの左マージンが適用され、6番目のアイテムは現在次の行にプッシュされます。私より賢い人がそれを理解できると確信しています。

IE6で最初の子を取得するために、式（スクリプトだと思いますが、うまくいくかもしれません）と条件付きコメントを使用しています。楽しみ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Columns test</title>
    <style type="text/css" media="screen">
        #container {
            border: 1px solid red;
            width: 320px;
            overflow: hidden;
        }
        .column {
            margin-left: 10px;
            width: 100px;
            float: left;
            background: #ccc;
        }
        .column:first-child {
            margin-left: 0;
        }
    </style>
    <!--[if IE 6]>
    <style type="text/css" media="screen">
        .column {
            margin-left: expression((this===this.parentNode.childNodes[0])?"0":"10px");
            display: inline;
        }
    </style>
    <![endif]-->
</head>
<body>
    <div id="container">
        <div class="column">
            <p>Column 1</p>
        </div>
        <div class="column">
            <p>Column 2</p>
        </div>
        <div class="column">
            <p>Column 3</p>
        </div>
    </div>
</body>
</html>
于 2009-07-10T02:15:28.280 に答える
0

私の知る限り、各行の最後の項目を識別するためにクラスを使用しないと不可能です (スクリプト言語を使用してリストを生成すると、簡単に識別できます)。それ以外の場合は、margin-left を 330px に分割する20px / 3 = 6pxか、幅<div>を 330px に増やして、余分なマージンに対応できるようにすることができます。

于 2009-07-10T01:46:03.730 に答える
0

ワードプレスでは、これは「ワードプレスループ」にいくつかのビットを追加することで実行できます... ここでの解決策: http://wordpress.org/support/topic/368646

于 2010-07-11T15:02:20.240 に答える
-2 
.divFloat { margin-left: 10px; ...}
.divFloat:First {margin-left: 0; ...}

上記が機能しない場合は、代わりに幅を 99px にして、div の境界線をすべて削除してください。ブラウザには丸めなどの問題があり、その動作を期待できない場合があります。

于 2009-07-10T01:41:56.810 に答える