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

Question

我想用白色正方形填充所有液体。
如您所见，每种流体都填充有白色，但不是完整的正方形。
我用div类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，以便其拉伸以适合内部浮动div的高度。 但是，仅添加这些内容，您将获得白色背景，占据页面的整个宽度。 像这里

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