Question

我有三个div标签，我希望垂直地在div标签之间留出空间，并且还希望我的第一个div标签是固定标签。

当我将第一个div位置设置为而不是固定的时，我可以能够制作垂直空间。

<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>
</html>

当我将“div a”位置更改为 fixed 时，“div a”和“div b”都从margin-top：2em。

<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>
</html>

请帮我将“div a”设为修复，并在“div a和b”之间设置空间

Answer 1

为了将div.a（固定的）保留在页面顶部，请添加top: 0;，如果您希望它保留在其余内容之上，请添加{{1 }}

为了在z-index: 2;和div.a之间添加间距，您必须在div.b周围放置一个容器div并对其进行适当的填充。如果你只是在主容器div上放置填充它将偏移div.b。

如果可能，请将最终高度设置为div.a，而不是百分比，因为这会使div.a及其容器的垂直对齐更加容易。这样，您可以将div.b的{{1}}设置为margin-top的{{1}}。

以下是重构的CSS和HTML，以提高可读性：

div.b

height

Answer 2

使其他两个div也固定，保留margin-top：2em参数

Answer 3

当您将其设置为固定时，它会将其从正常文档流中取出。这就是为什么其他元素在它下面迷失了。添加一个顶部：0;划分并更改为我工作的div b的margin-top。它至少是一个起点。我不知道你要找的最终结果是什么。看看链接

http://jsfiddle.net/8ar3kvep/

<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed; top:0;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 
4em; 
margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>

如何在div标签之间建立垂直空间？

3 个答案: