Question

我已经离开HTML和CSS几年了。如何将页面的主体划分为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来容纳填充和边框。）

为了让它适合浏览器窗口，它们应位于设置为占据整个窗口的<body>内。

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%一致。

如何将一个体分成五个相等的部分

5 个答案: