我該如何填充顏色並使用CSS對其進行平方？

我想用白色方塊填充所有液體。
當你看到圖片時，每種液體都充滿了白色，但它並不完整。
我用div類WhiteZone包裹整個，但它不會使它們成方形。
我該如何讓它變成方形？我該如何填充顏色並使用CSS對其進行平方？

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

來源

2013-01-15 cat

清除你的花車。 –

你是說你只是想將背景設置爲低於'hijklmn' div的白色？ –

您可以使用display: table。這樣寫：

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

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

請檢查這個demo。

來源

2013-01-15 16:14:46 sandeep

謝謝這就是我想要的答案。但是，當我嘗試同時使用邊框時會發生混亂。你能解決它並更新嗎？ http://jsfiddle.net/EfwLj/6/ – cat

也許你想要http://jsfiddle.net/EfwLj/9/ – sandeep

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

您可以將overflow：hidden添加到您的whitezone類，以便它適合內部浮動div的高度。但只有這樣，你會得到白色背景，佔用你的頁面的全部寬度。像here

爲了避免這種情況，還可以通過「盒子」之後添加float:left您whitezone類（如here）或設置width到它（如here）

來源

2013-01-15 16:18:26

我該如何填充顏色並使用CSS對其進行平方？

回答

相關問題