輸出我正在創建一個包含三個容器的菜單頁面:雞肉、牛肉和壽司。然而，在編寫CSS代碼后，這些框顯得不均勻。以下是我的CSS代碼:

* {
    box-sizing: border-box;
}

body {
    background-color: white;
}

h1 {
    text-align: center;
    font-family: cursive;
}

div{
    border: 1px solid black;
    width: 300px;
    float: left;
    margin: 20px;
}

我需要幫助找出為什么集裝箱不均勻，以及如何修復它。

你有兩個選擇:

要設置固定高度和溢出:滾動div選擇器，如下所示:

div{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    overflow: scroll;
    float: left;
    margin: 20px;
}

這很簡單，不需要對代碼做太多修改。這些框具有相同的高度(300像素)，但是如果一個div的內容不適合這個高度，它們將被隱藏，可以通過滾動來查看。

更好更強大的方法是使用flexbox。您可以制作一個flexbox容器并將div包裝在里面，就像這樣:

.flexbox
{
    display: flex;
}

.box{
    border: 1px solid black;
    width: 300px;
    margin: 20px;
}

<div class="flexbox">
    <div class="box">
    ...
    </div>
    <div class="box">
    ...
    </div>
    <div class="box">
    ...
    </div>
</div>

請注意，我們移除了float: left。還要注意，最好使用類選擇器而不是元素選擇器(注意div { with。box {)，盡可能避免元素選擇器。