如何在div標籤之間製作垂直空間？

我有三個div標籤，我想在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>

當我改變我的「分區一」位置固定，既「分區一」和「格B」來自於保證金自上而下：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>

請幫助我，使我「分區一」爲固定並作出空間之間「分區a和b」。

來源

2014-10-07 Sivaprakash

爲了保持div.a（固定的）到頁面的頂部，添加top: 0;，如果你希望它留在內容的其餘部分的頂部包括z-index: 2;。

爲了增加div.a和div.b之間的間距，您將不得不將div的容器放在div.b附近，併爲其填充適當的填充。如果您只是在主容器div上填充填充，它將抵消div.a。

如果可能，請將最終高度設置爲div.a而不是百分比，因爲這將使div.b與其容器的垂直對齊更容易。通過這種方式，您可以將margin-top設置爲div.b，即的div.a。

下面是CSS和HTML重構爲更好的可讀性：

/* CSS */ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 100%; 
 
} 
 
div.container { 
 
    height: 100%; 
 
} 
 
div.container, 
 
div.b-container { 
 
    background-color: lime; 
 
} 
 
div.a { 
 
    height: 70px; 
 
    background-color: blue; 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 2; 
 
} 
 
div.b-container { 
 
    position: relative; 
 
    padding-top: 2em; 
 
    margin-top: 70px; 
 
} 
 
div.b-container div.b { 
 
    width: 70%; 
 
    height: 100%; 
 
    background-color: gray; 
 
    margin: auto; 
 
    
 
    margin-bottom: 2em; 
 
} 
 
div.c { 
 
    height: 5%; 
 
    background-color: aqua; 
 
}

<!-- HTML --> 
 
<div class="container"> 
 
    <div class="a"> 
 
    a 
 
    </div> 
 
    <div class="b-container"> 
 
    <div class="b">b 
 
    </div> 
 
    </div> 
 
    <div class="c"> 
 
    c 
 
    </div> 
 
</div>

來源

2014-10-07 17:51:58 seantunwin

感謝您的回答。這是非常明確的解釋。 :) – Sivaprakash 2014-10-08 06:48:08

讓你的其他兩個div爲固定也保持的margin-top：2em的參數

來源

2014-10-07 16:26:40

感謝您的答覆。我可以騰出空間，但無法查看整個頁面。我無法向下滾動... – Sivaprakash 2014-10-07 16:46:31

用padding-top替換margin-top，看看是否有幫助 – 2014-10-07 16:48:33

感謝您的回覆... :) – Sivaprakash 2014-10-08 06:49:39

當你把它設置爲固定它需要它的正常公文流轉。這就是爲什麼其他elemts在它下面迷路了。添加一個頂部：0; div a並改變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>

來源

2014-10-07 17:31:56 Mikem

非常感謝您......它的工作原理... :) – Sivaprakash 2014-10-08 06:36:37

如何在div標籤之間製作垂直空間？

回答

相關問題