html - 使用 div 拆分 HTML 页面

Question

我知道这个问题已经被问过好几次了。但是我对 HTML 不是很有经验，并且坚持遵循建议的解决方案 here .

我当前的实现类似于 this .但问题是，如果我拉伸(stretch)和调整浏览器窗口的大小，四个相等大小的象限的边界就会随之而来。我想要的是:

1. 顶部区域将保留用于加载按钮和筛选框。
2. 该区域的其余部分将分为四个大小相等的象限。
3. 调整浏览器窗口时，所有这五个区域不应相互溢出。
4. 如果我插入 <div>的 在每个象限内绘制绘图，它们应该优雅地落到位，并且无论浏览器的大小如何变化，它们都会占据四个大小相等的区域。

我想要实现的目标如下图所示:

预先感谢您的帮助!

Answer 1

您可以将 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>