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

Question

我正在尝试做一个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>

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

我知道这是一个非常有争议的问题，但是任何帮助，甚至是您认为最好的方法的意见，我们都将不胜感激。提前致谢！

Answer 1

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

1.) 您需要使用 box-sizing: border-box; 在宽度测量中包含边框，否则（请参阅您的代码段）第四个元素将滑到第三个元素下方，因为 space 为它（只有几个像素，但仍然如此）。

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

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

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

Page deviation into 4 parts H Layout css

html

css

css-float

flexbox