使用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像素宽[每边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，您可以执行以下操作。 Bootstrap 4使用$todaysDate = date('Y-m-d'); for($i = 0; $i < 30; $i++){ $newDates[] = date('Y-m-d', strtotime($todaysDate . ' +' . $i . ' days')); } echo '<pre>'; print_r($newDates); 代替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;
}

Answer 3

也分成行，

我建议您使用box-sizing: border-box;，以便在width设置为50%时考虑边框大小。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。