Question

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

This is not square!

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;
}

选中demo。

Answer 2

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

您可以将overflow：hidden添加到您的whitezone类中，以便它将拉伸以适应内部浮动div的高度。但只有添加后，您将获得整个页面宽度的白色背景。像here

一样

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

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

2 个答案: