如何將3個100％寬的盒子對齊放置在每個盒子下方？

Question

我知道這是超級簡單，但不知道爲什麼我不能做到這一點。

我想幹什麼？

我希望有3個盒子可以和用戶的屏幕一樣寬，並且需要將它們堆疊在一起。我也想刪除顯示在左側和右側的空白。

我試過了什麼？

<div class="box box1"> 
</div> 
<div class="box box2"> 
</div> 
<div class="box box3"> 
</div> 

.box { 
    width: 100%; 
    float: left; 
    height: 300px; 
    margin-bottom: 20px; 
} 
.box1 { 
    background: red; 
} 
.box2 { 
    background: green; 
} 
.box3 { 
    background: yellow; 
} 

Answer 1

不要float他們。 width: 100%在刪除float時是多餘的。

兩側的空白可能是邊距或填充body元素。只需將body { margin: 0; padding: 0}添加到您的CSS。