html - 如何使用 CSS 填充颜色并使其成为正方形？

Question

我想用白色方块填充所有液体。
如您所见，每种液体都充满了白色，但不是完全正方形。
我用 div class 包裹了整个WhiteZone，但它不会使它们成为正方形。
我怎样才能使它成为正方形？

现场演示

HTML

<div class="WhiteZone">
    <div class="Box">
        <div class="Left">
            abcdefg<br />
            opqrstu
        </div>
    </div>
    <div class="Box">
        <div class="Right">
            hijklmn
        </div>
    </div>
</div>

CSS

div.WhiteZone{
    color: #000;
    background-color: #fff;
}

div.Box{
    padding: 0px;
    text-align: center;
    float: left;
}

div.Left{
    width: 300px;
    padding-top: 5px;
    padding-bottom: 15px;
    text-align: center;
    color: #000;
    background-color: #fff;
    clear: both;
}

div.Right{
    width: 300px;
    padding-top: 5px;
    text-align: left;
    color: #000;
    background-color: #fff;
    clear: both;
}

Answer 1

你可以用display: table这个。像这样写：

div.WhiteZone {
    color: #000;
    background-color: #fff;
    display: table;
}

div.Box {
    padding: 0px;
    text-align: center;
    display: table-cell;
}

检查这个演示。

Answer 2

div.WhiteZone{
    color:#000000;
    background-color:#ffffff;
    overflow:hidden;
}

您可以将 overflow:hidden 添加到您的 whitezone 类中，以便它可以拉伸以适应内部浮动 div 的高度。但是只有添加了这个，你才会得到占据整个页面宽度的白色背景。喜欢这里

为避免这种情况，您还可以添加float:left到您的 whitezone 类（如此处）或width为其设置 a（如此处）