css - css ヘッダー レイアウト幅 3 div

Question

3 つの div を持つヘッダーを作成しようとしています。1 つは左に配置され、もう 1 つは右に配置され、もう 1 つは中央にあります。

たとえば、ページは 1200px です。黒、赤、黄色の長方形は 960px で、ページの中央にあります。黒い四角形の要素は左側に追加され、黄色の四角形の要素は右側に追加され、赤い四角形の要素は中央に配置されます。

これは、サイトのヘッダーに関する優れた一般的なケース スタディです。

Answer 1

これで問題が解決します

<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
    <div style='float:left;'>Some content</div>
    <div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
    <div style="margin:10px auto;text-align:center">Some content</div>
    <div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
        <div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>

Answer 2

しばらく前にこれに関する記事を書きましたが、ここに私のコードがあります...

<div id="mainContent">

  <div id="col1">

    Column 1

  </div>

  <div id="col2">

    Column 2

  </div>

  <div id="col3">

    Column 3

  </div>

  <div id="clearance" style="clear:both;"></div>

</div>

そして、これがそのCSSです....

#mainContent {

    width: 1000px;

    margin-right: auto;

    margin-left: auto;

    text-align: center;

}

#col1 {

    margin: 10px;

    float: left;

    width: 300px;

}

#col2 {

    margin: 10px;

    float: left;

    width: 300px;

}

#col3 {

    margin: 10px;

    float: left;

    width: 300px;

}

これがお役に立てば幸いです... Phillip Dews

Answer 3

これを試して..

<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>

<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>