html - 如何对齐 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。