页面偏差分为 4 个部分 H 布局 css答案

【问题标题】：Page deviation into 4 parts H Layout css页面偏差分为 4 个部分 H 布局 css
【发布时间】：2023-03-19 14:35:01
【问题描述】：

我正在尝试制作 H 页布局：

body {
  background-color: grey;
  background-size: 100%;
  background-repeat: no-repeat;
}

html,
body {
  height: 100%;
  margin: 0px;
}

.a {
  float: left;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

.b {
  float: left;
  width: 50%;
  height: 60%;
  border: 1px solid blue;
}

.c {
  float: left;
  width: 50%;
  height: 40%;
  border: 1px solid blue;
}

.d {
  float: right;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

<div class="a">
  text
</div>
<div class="b">
  text
</div>
<div class="c">
  text
</div>
<div class="d">
  text
</div>

但由于某种原因，我的最后一个 div 掉到了底部我很好奇我是否可以在 flexbox 上做我想做的事，所以我也尝试了这个

How to split page into 4 equal parts?

http://jsfiddle.net/scriv/ye6bd4ow/4/

html,
body {
 height: 100%;
 padding: 0;
 margin: 0;
}

div {
 float: left;
}

#div1 {
 background: #DDD;
 width: 20%;
 height: 100%;
}

#div2 {
 background: #AAA;
 width: 60%;
 height: 60%;
}

#div3 {
 background: #777;
 width: 60%;
 height: 40%;
}

#div4 {
 float: right;
 background: #444;
 width: 20%;
 height: 100%;
}

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

同样的结果，但我认为比第一个例子更接近一点

我知道这是一个非常有争议的问题，但任何帮助，甚至是您认为最好的方法的意见都会受到赞赏。提前致谢！

【问题讨论】：

2016年之前建议大家不要太关注问题，也不要找那么具体的问题。只需了解这些属性是如何工作的，什么是 CSS，它是如何工作的，以及如何构建基本布局。我认为这可以通过使用 flexbox 或 grid-laoyut 的几个类来解决
@CristianTraìna 我会马上开始的。有什么你认为最好的内容吗？
我使用了 scrimba flexbox tutorial 和 grid layout tutorial。但我不知道周围有没有更好的东西

标签： html css flexbox css-float

【解决方案1】：

有两个问题需要解决（如果你想让浮动版本工作）：

1.) 您需要使用 box-sizing: border-box; 将边框包含在宽度测量中，否则（请参阅您的 sn-p）第四个元素将滑到第三个元素下方，因为没有足够的空间放置它（仅几个像素，但仍然如此）。

2.) 您需要更改 HTML 中的顺序：d 应该是第三个元素，以便它可以位于页面/容器的顶部：

* {
  box-sizing: border-box;
}

body {
  background-color: grey;
  background-size: 100%;
  background-repeat: no-repeat;
}

html,
body {
  height: 100%;
  margin: 0px;
}

.a {
  float: left;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

.b {
  float: left;
  width: 50%;
  height: 60%;
  border: 1px solid blue;
}

.c {
  float: left;
  width: 50%;
  height: 40%;
  border: 1px solid blue;
}

.d {
  float: right;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

<div class="a">
  text a 
</div>
<div class="b">
  text b
</div>
<div class="d">
  text d
</div>
<div class="c">
  text c 
</div>

【讨论】：