我怎麼垂直對齊的div左，中，頁眉和頁腳DIV之間的權利

-4

我的新節目，我想安排div元素如下：我怎麼垂直對齊的div左，中，頁眉和頁腳DIV之間的權利

header div 1 
-------------------- 
left 2 | center 3| right 4 | 
--------------------- 
footer div 5

我試過位置和顯示屬性，但未能獲得期望的結果。

我該如何安排這種方式以及如何以簡單的方式安排任何div元素？

來源

2016-09-26 speedyraz

預計您至少會嘗試自己編寫此代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

試試這個代碼爲您的div結構。

.wrapper { 
 
    color: #fff; 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.header { 
 
    background-color: red; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.left { 
 
    background-color: orange; 
 
    float: left; 
 
    width: 25%; 
 
} 
 
.center { 
 
    background-color: green; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.right { 
 
    background-color: orange; 
 
    float: left; 
 
    width: 25%; 
 
} 
 
.footer { 
 
    background-color: blue; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.header, .footer { 
 
    margin: 1% 0; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
     <h1>Header Div</h1> 
 
    </div> 
 
    <div class="left"> 
 
     <h1>Left Div</h1> 
 
    </div> 
 
    <div class="center"> 
 
     <h1>Center Div</h1> 
 
    </div> 
 
    <div class="right"> 
 
     <h1>Right Div</h1> 
 
    </div> 
 
    <div class="footer"> 
 
     <h1>Footer Div</h1> 
 
    </div> 
 
</div>

來源

2016-09-26 06:39:32 Jainam

試試這個代碼

HTML

<div class="header">Header Div</div> 

<div class="left-section"></div> 
<div class="center-section"></div> 
<div class="right-section"></div> 


<div class="footer-section">Footer</div>

CSS

.header{ 
    width:100%; 
    height:50px; 
    background:green; 
} 
.left-section{ 
    height:500px; 
    width:29%; 
    display:inline-block; 
    background:yellow; 
    padding:0px; 
    margin:0px; 
} 
.right-section{ 
    height:500px; 
    width:29%; 
    display:inline-block; 
    background:gold; 
    padding:0px; 
    margin:0px; 
} 
.center-section{ 
    height:500px; 
    width:40%; 
    display:block; 
    display:inline-block; 
    background:gray; 
    padding:0px; 
    margin:0px; 
} 
.footer-section{ 
    width:100%; 
    height:50px; 
    background:orange; 
}

Codepen鏈接

http://codepen.io/santoshkhalse/pen/gwWbAV

來源

2016-09-26 06:41:58

我怎麼垂直對齊的div左，中，頁眉和頁腳DIV之間的權利

回答

相關問題