我有 2 个 div 向左浮动,因此它们将显示为内联
<div class==".container" style="width: 100%">
<div class="leftColumn" style="width: 50%; float:left">
test
</div>
<div class="rightColumn" style="width: 50%; float:left">
test
</div>
</div>
当屏幕低于 400 像素时,我希望 div 出现在彼此下方 我当前的媒体查询
@media(max-width: 400)
{
.leftColumn{background-color: Red; float: none}
.rightColumn{background-color: Blue; float: right}
}
感谢任何能提供帮助的人
最佳答案
同样的效果
@media(max-width: 400) {
.leftColumn, .rightColumn{width:100%;}
}
关于html - 响应式设计 - 2 列缩减为 1 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10869246/