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

我想用白色方块填充所有液体。
如图所示，每种液体都充满了白色，但不是完全的正方形。
我用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>

---

您可以为此使用

display:table

。这样写：

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

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

看看这个

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

---

为了避免这种情况，您还可以将

float:left

添加到您的whitezone类（like）中，或者为其设置

width

（like）

清除“Box”后的浮动。您是说您只想在

hijklmn

div下面将背景设置为白色？谢谢这是我想要的答案。但当我试图同时使用border时，情况就糟了。你能修复并更新它吗？

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

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

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