Question

如果这个问题已经得到解答，我很抱歉，这似乎是一个基本问题，但我找不到解决办法。

问题：

我想在此布局中使用HTML排列元素（其中a和b是任意元素）：

aa
 a
bb
 b

示例：

我试过这个，使用按钮作为任意元素（JSFiddle link）：

<!DOCTYPE html>
<html>

    <head>
        <style>
            .left {
                float: left;
                /*display: inline-block;*/
            }
        </style>
    </head>

    <body>
        <div>
            <div class="left">
                <div>
                    <button type="button">a</button>
                </div>
            </div>
            <div class="left">
                <div>
                    <button type="button">a</button>
                </div>
                <div>
                    <button type="button">a</button>
                </div>
            </div>
        </div>
        <div>
            <div class="left">
                <div>
                    <button type="button">b</button>
                </div>
            </div>
            <div class="left">
                <div>
                    <button type="button">b</button>
                </div>
                <div>
                    <button type="button">b</button>
                </div>
            </div>
        </div>
    </body>

</html>

但我得到了这个：

aabb
 a b

当我使用inline-block时，我得到了这个（仍然是错误的）：

 a
aa
 b
bb

任何解决方案？我应该使用不同的方法吗？

Answer 1

将一个包装类放到你周围的div中：

    <div class="wrapper">
        <div class="left">
            <div>
                <button type="button">a</button>
            </div>
        </div>
        <div class="left">
            <div>
                <button type="button">a</button>
            </div>
            <div>
                <button type="button">a</button>
            </div>
        </div>
    </div>

并使用此css：

 .left {
     float: left;
 }

.wrapper {
    display: block;
    float: left;
    width: 100%;
}

示例：https://jsfiddle.net/L7qd0vr3/3/

Answer 2

你的HTML错了。使用clear：both和fix html。

    <div>
        <div class="left">
            <div>
                <button type="button">a</button>
            </div>
        </div>
        <div class="left">
            <div>
                <button type="button">a</button>
            </div>
            <div>
                <button type="button">a</button>
            </div>
        </div>
    </div>

应该是

<div>
        <div class="left">
            <div>
                <button type="button">a</button>
            </div>
            <div>
                <button type="button">a</button>
            </div>
        </div>
        <div class="left">
            <div>
                <button type="button">a</button>
            </div>
        </div>
    </div>

HTML元素的分层垂直和水平划分

2 个答案: