是否可以自动调整 2 列 div 的大小,以便满足以下条件:
每列自动调整为显示宽度的 50% 左右。 每列的最小宽度约为 200 像素。 当任一列/两列都小于最小宽度时,将右侧 div 直接放在左侧 div 下方,并将两个 div 自动调整为显示的全宽。
这个想法是桌面和表格(400 像素及更宽)将显示 2 列:
Width >= 400px
+-------+-------+
| 50% | 50% |
+-------+-------+
div1 div2
较小的显示屏将显示 2 行:
Width < 400px
+---------------+
| 100% | div1
+---------------+
| 100% | div2
+---------------+
最佳答案
纯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>
关于css - 自动调整 2 个 div 从列到行的大小,同时保持全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20980137/