是否可以自动调整2列div,以便满足以下条件:
每列自动调整到显示宽度的~50%。 每列的最小宽度约为200px。 当任一列/两列都小于最小宽度时,将右div直接放在左div下面,并将两个div自动调整为显示的全宽。
这个想法是桌面和桌子(400px和更宽)将显示2列:
Width >= 400px
+-------+-------+
| 50% | 50% |
+-------+-------+
div1 div2
较小的显示屏将显示2行:
Width < 400px
+---------------+
| 100% | div1
+---------------+
| 100% | div2
+---------------+
答案 0 :(得分:2)
纯CSS 解决方案:
CSS:
html, body, .container {
width: 100%;
margin: 0;
padding: 0;
}
.content {
display: inline-block;
width: 50%;
border: 2px solid #f0f;
background-color: #0ff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (max-width: 400px) {
.content {
display:block;
width: 100%;
}
}
HTML:
<div class="container">
<div class="content">
Content
</div><!--
--><div class="content">
Content
</div>
</div>