1

最初のブロックの下に3番目のブロックを作成するにはどうすればよいですか？

次に、2番目の下の3番目のブロック。

デモhttp://jsfiddle.net/SdR6e/1/

HTML

<!DOCTYPE html>
<html>
    <body>
        <div style="width: 400px;">
            <div class="semiblock" style="height: 200px;">
                First
            </div>
            <div class="semiblock" style="height: 100px;">
                Second
            </div>
            <div class="semiblock" style="height: 200px;">
                Third
            </div>
            <div class="semiblock" style="height: 200px;">
                Fourth
            </div>
        </div>
    </body>
</html>​

CSS

    .semiblock {
        border: 1px solid black;
        float: left;
        margin: 0;
        width: 198px;
    }​

私はこれを必要とする：

ここに画像の説明を入力してください

4

4 に答える 4

3

次のように挿入してみてくださいclear:both： DEMO

HTML

<!DOCTYPE html>
<html>
    <body>
        <div style="width: 400px;">
            <div class="semiblock" style="height: 200px;">
                First
            </div>
            <div class="semiblock" style="height: 100px;">
                Second
            </div>
            <div class="clear">
            </div>
            <div class="semiblock" style="height: 200px;">
                Third
            </div>

            <div class="semiblock" style="height: 200px;">
                Fourth
            </div>
        </div>
    </body>
</html>​

CSS：

        .semiblock {
            border: 1px solid black;
            float: left;
            margin: 0;
            width: 198px;
}
.clear {
    clear:both;
}

</ p>

于 2012-10-25T12:17:26.633 に答える
0

解決策は次のとおりです：http：//jsfiddle.net/SdR6e/2/

clear:both;別の要素の下に次の要素が必要な場合に使用します。

これを複数のブロックで使用する場合は、クラスに書き込み、ターゲット要素にクラスを追加します。

.clearall{
  clear:both;
}
于 2012-10-25T12:17:06.010 に答える
0

以下の HTML を使用してください。同じ CSS を使用するか、指定されたフィドルを更新しました。下記URLよりご確認ください。

http://jsfiddle.net/SdR6e/11/

    <div style="width: 400px;">
        <div class="semiblock" style="height: 200px;">
            First
        </div>
        <div class="semiblock" style="height: 100px;">
            Second
        </div><div style='clear:both;'></div>
        <div class="semiblock" style="height: 200px;">
            Third
        </div>
        <div class="semiblock" style="height: 200px;">
            Fourth
        </div>
    </div>
于 2012-10-25T12:40:01.627 に答える
0

「アレッサンドロ・ミノッケリ」のやり方がいい(+1)、

ただし、3番目のブロックに「clear:left」値を追加するだけです:

<!DOCTYPE html>
<html>
    <body>
        <div style="width: 400px;">
            <div class="semiblock" style="height: 200px;">
                First
            </div>
            <div class="semiblock" style="height: 100px;">
                Second
            </div>
            <div class="semiblock" style="height:200px;clear:left;">
                Third
            </div>
            <div class="semiblock" style="height: 200px;">
                Fourth
            </div>
        </div>
    </body>
</html>
于 2012-10-25T12:28:32.737 に答える