間のdivの左、中央を揃えるか、私はプログラミングに新しいです、私は次のようにdiv要素を手配したい：どのように私は、垂直右ヘッダーとフッターのdiv
header div 1
--------------------
left 2 | center 3| right 4 |
---------------------
footer div 5
私は位置や表示属性を試みたが、に失敗しました。所望の結果を得る。
どのようにしてこのように配置でき、どのようにdiv要素を簡単に配置できますか？
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>このコードを試してみてください
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://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –