Question

如何在第一个下面制作第三个块？

现在第三块低于第二块。

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;
    }

我需要这个：

enter image description here

Answer 1

尝试像这样插入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; }

Answer 2

以下是解决方案：http://jsfiddle.net/SdR6e/2/

如果您希望下一个元素位于另一个元素下方，请使用clear:both;。

如果将它用于多个块，则将其写入类中，并将类添加到目标元素。

.clearall{
  clear:both;
}

Answer 3

“Alessandro Minoccheri”的方法很好（+1），

但是，您也想在第三个块中添加“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>

Answer 4

请使用以下HTML ..并使用相同的CSS或我已更新您给定的小提琴。请使用以下网址进行检查。

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>

上一个块下面的CSS布局块

4 个答案: