我知道这个问题已经被问过好几次了。但是我对 HTML 不是很有经验,并且坚持遵循建议的解决方案 here .
我当前的实现类似于 this .但问题是,如果我拉伸(stretch)和调整浏览器窗口的大小,四个相等大小的象限的边界就会随之而来。我想要的是:
- 顶部区域将保留用于加载按钮和筛选框。
- 该区域的其余部分将分为四个大小相等的象限。
- 调整浏览器窗口时,所有这五个区域不应相互溢出。
- 如果我插入
<div>
的 在每个象限内绘制绘图,它们应该优雅地落到位,并且无论浏览器的大小如何变化,它们都会占据四个大小相等的区域。
我想要实现的目标如下图所示:
预先感谢您的帮助!
最佳答案
您可以将 4 个象限分成 2 行。
并给每一行 100% 宽度
每个象限 50% 的宽度
还有,
使象限向左浮动
。
.row {
width: 100%;
padding: 0;
margin: 0;
}
.quad {
border: 1px solid black;
border-radius: 8px;
width: 49%;
padding: 0;
margin: 0;
height: 200px;
float: left;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
注意:我已将 49% 分配给象限以容纳边框(它们的宽度为 2 像素 [每边 1 像素])
如果您只针对较新版本的浏览器,您也可以使用 flex CSS 执行此操作。
在这种情况下,您不必担心宽度。
只要给你的行 div : display: flex;
和你的象限:flex: 1 1 auto;
阅读更多 here关于柔性显示器。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
.row {
display: flex;
}
.quad {
flex: 1 1 auto;
border: 1px solid black;
border-radius: 8px;
height: 200px;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
关于html - 使用 div 拆分 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50674222/