Question

鉴于以下HTML和CSS，如果容器宽度小于600px，我希望蓝色框在粉红色框下移动，而不是在红色框下移动。

HTML

<div class="row" id="one">
    &nbsp;
</div><div class="row" id="two">
    &nbsp;
</div><div class="row" id="three">
    &nbsp;
</div>

CSS

#one{
    height: 200px;
    background-color: red;
}
#two{
    height: 100px;
    background-color: pink;
}
#three{
    height: 100px;
    background-color: blue;
}
.row{
    display: inline-block;
    width: 200px;   
    margin: 0px;
    padding: 0px;
}

Answer 1

取决于您在网页中的其他内容，但是只需将float: left;添加到红色div中。它会根据你的需要坐在粉红色的div下。

然后在600px以上时添加媒体查询以移除浮动。

@media(min-width: 600px) {
  #one { float: none; }
}

希望能帮到你！

Answer 2

给浮动：左边红色块

#one {
    float:left
    height: 200px;
    background-color: red;
}

如何使用CSS在第二个框下移动第三个框

2 个答案: