我在普通容器div中有一个带有简单的2列CSS表的页面,如下所示:
#container:after {
content: "";
display: table;
clear: both;
}
#col_1 {
float: left;
width: 50%;
padding-right: 20px;
}
#col_2 {
width: 50%;
}
它在计算机上正常工作,但在移动设备上,两列重叠/重叠,我希望col2在col1下面。换句话说,只有两个都有空间时才浮动,否则变成两行。我该怎么办?
谢谢
由于我没有您的HTML代码,所以我只能自己做一个模型。添加用于移动设备断点的媒体查询。
html,
body,
#container {
width: 100%;
margin: 0;
}
#container:after {
content: "";
display: table;
clear: both;
}
#col_1 {
float: left;
width: 50%;
height: 100px;
padding-right: 20px;
background: orange;
}
#col_2 {
float: left;
width: calc(50% - 20px); /* The 20px is the padding-right of the col_1 */
height: 100px;
background: lime;
}
@media screen and (max-width: 576px) {
#col_1 {
width: 100%;
}
#col_2 {
width: 100%;
}
}
<div id="container">
<div id="col_1"></div>
<div id="col_2"></div>
</div>