页面偏差分为4部分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;在宽度测量中包括边框，否则（请参见您的代码段）由于没有足够的空间，第四个元素将滑到第三个元素下方（仅几个像素，不过）。

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>