使用 div 分割 HTML 页面

Question

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

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

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

我想要达到的效果如下图所示：

提前感谢您的帮助！

Answer 1

您可以将 4 个象限分成 2 行。

并给每一行100% width

每个象限都有一个width of 50%

还有， 做象限float left.

.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 px [每边 1px]）

---

如果您只针对较新版本的浏览器，您也可以使用 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>

Answer 2

使用 bootstrap 4，您可以轻松创建这样的布局。 Bootstrap 使开发人员可以更轻松地创建布局。

如果您想使用引导程序，您可以执行以下操作。 Bootstrap 4 使用 flexbox 而不是 float，与 bootstrap 3 相比，+1。

.vh-100 {
  min-height: 100vh;
}

.choose-plot {
  padding-top: 15px;
  padding-bottom: 15px;
}

.bordered {
  border: 1px solid #ccc;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<div class="container-fluid d-flex h-100 flex-column vh-100">
    <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col choose-plot">
        <strong class="mb-2">Add/remove COUNTRIES (max: 5), ADVERTISES (max 4), YEAR (max 1), and plot location below. Then, click 'load plot'.</strong>
            <div class="row">
              <div class="col-4">
                <select class="custom-select">
                  <option>Choose plot</option>
                </select>
              </div>
              <div class="col-8">
                <button class="btn btn-primary">Load plot</button>
              </div>
            </div>
        </div>
    </div>
    <div class="row flex-fill d-flex justify-content-start">
        <div class="col-6 bordered">1 of 4</div>
        <div class="col-6 bordered">2 of 4</div>
        <div class="col-6 bordered">3 of 4</div>
        <div class="col-6 bordered">4 of 4</div>
    </div>
</div>

Answer 3

也分行，

我建议您使用box-sizing: border-box;，这样当您将width 设置为50% 时，会考虑边框大小。

.col {
  width: 50%;
  height: 160px;
  float: left;
  box-sizing: border-box;
  border: 2px solid gray;
  border-radius: 4px;
  padding: 4px;
}

<div>Something here.</div>
<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
</div>
<div class="row">
    <div class="col">3</div>
    <div class="col">4</div>
</div>

希望对你有帮助。