时间戳

首页 > 解决方案 > 页面偏差分为 4 个部分 H 布局 css

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

问题描述

我正在尝试制作 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 走到了底部

如何将页面分成4等份？

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>

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

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

标签： htmlcssflexboxcss-float

解决方案

有两个问题需要解决（如果您希望浮动版本工作）：

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>

推荐阅读