如何将 body 分成五个相等的部分

Question

我已经离开 HTML 和 CSS 几年了。如何将页面的 body 水平分成 5 个相等的部分，这些部分会随着页面大小的调整而改变大小。这感觉应该很容易，但我真的想不通。

Answer 1

这样使用：

*{
  margin: 0;
  padding: 0;
}
html,body{
  height: 100%;
}
section{
  height: 20%;/*body height is 100% so, 100%/5=20%*/
}

Answer 2

您可以按百分比设置 <div> 元素的宽度。因此，将宽度设置为 20% 将为您提供整个页面宽度的五分之一。（您可能不得不使用 less 来容纳填充和边框。）

要使其适合浏览器 window，它们应该位于 <body> 内，该 <body> 设置为占据整个 window.

Answer 3

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

section{
display:inline-block;
height: 100%;
width: 20%;
box-sizing: border-box;
background: #d2d2d2;
border: solid 1px #ccc;
float: left;
}

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

Answer 4

试试这个。我还添加了边框，以便您可以看到部分的划分

HTML

<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>

CSS

*{margin:0;padding:0;}
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
}
section{
    width:20%;
    height:100%;
    float:left;
    background:#222;
    box-sizing:border-box; /* so the borders don't mess up the alignment */
    border:1px solid #fff;
}

http://jsfiddle.net/noajkkhj/

Answer 5

每个部分 width:20% float:left 和正文 width: 100%。

如何将 body 分成五个相等的部分

How can I divide a body into five equal sections

html

css

layout