1

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

现在第三块低于第二块。

演示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

“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>
于 2012-10-25T12:28:32.737 回答
0

请使用下面的 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>
于 2012-10-25T12:40:01.627 回答
0

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

clear:both;当您希望下一个元素位于另一个元素下方时使用。

如果您将其与多个块一起使用，则将其写入一个类并将类添加到目标元素。

.clearall{
  clear:both;
}
于 2012-10-25T12:17:06.010 回答