如何将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。