cssを使用して残りの幅の半分をどのように選択しますか？

Question

私は3つの列、ページの中央に配置された1000pxの中央の列、残りの幅を占める左右の列が必要です。

が

ラッパーが1000pxであり、2つのサイドのスペースが残っている総容量の半分以下のとおりです。

は、私は基本的にはこのようになります何かをしたいです。

Answer 1

HTML - 私はこのような何かをするだろう。これにより、要素の左右にスペースが残されます。要素が幅全体を占める別の要素内にある場合、その中に背景を配置して中心に配置することができます。

例は次のようになります。

<div id="container"> 
    <div id="content"></div> 
</div> 

次にCSSは次のようになります。#content divの内容のいずれかの側に置くことは不可能であろう

#container { 
    width: 100%; 
    /* Background properties go here. */ 
} 

#content { 
    margin: 0px auto; 
    width: 1000px; 
} 

。純粋なCSSのアプローチについては

Answer 2

あなたの「ページ幅」は1024ピクセル幅です。

<div id="page_content"> 
    <div id="element_left"> 
    </div> 
    <div id="centered_element"> 
    </div> 
    <div id="element_right"> 
    </div> 
</div> 

CSS：あなたは簡単にmargin: 0px autoを持つ要素をセンタリングすることができます

#page_content { width:1024px; margin:0px auto 0px auto;} 
#element_left { width:12px; float:left;} 
#element_right { width:12px; float:left;} 
#centered_element { width:1000px; margin:0px auto 0px auto; float:left;} 

Answer 3

、http://jsfiddle.net/hKB9T/2/のようなものを試してみてください（「結果」ボックスが〜1200px広い程度であるように、あなたのブラウザのウィンドウを広げていることを確認してください）

それは（あなたの要件に応じて完全なものではありません.center要素の位置を知る必要があるかもしれませんが、それは正しい軌道に乗るはずです。

<div id="page"> 
    <div class="center">center column</div> 
    <div class="leftcol"> 
     <div class="inner">left column</div> 
    </div> 
    <div class="rightcol"> 
     <div class="inner">right column</div> 
    </div> 
</div> 

と

.leftcol, .rightcol { 
    width: 50%; 
    float: left; 
} 
.leftcol .inner { 
    margin-right: 500px; 
    height: 200px; 
} 
.rightcol .inner { 
    margin-left: 500px; 
    height: 200px; 
} 
.center { 
    width: 1000px; 
    margin: 0 auto -200px auto; 
    background-color: #eee; /* just for illustration */ 
}