html - 固定幅のdivの左右の水平方向のスペースをdivで埋める方法

Question

私は3つのdivを持っています：divLeft、divCenterそして私は1200pxの幅で中央に配置しdivRightたいと思います。divCenter左右には、画面の端まで塗りつぶすための滑らかな幅が必要です。

これどうやってするの？

Answer 1

これが純粋なCSSソリューションです：http：//jsfiddle.net/Wexcode/BGU7V/

これをFauxColumnsと組み合わせて使用​​することをお勧めします。

.divCenter { 
    width: 1200px;
    margin: 0 auto; }
.divCenter p { 
    position: absolute;
    top: 0;
    width: 1200px; }​

.divLeft { float: left; width: 50%; }
.divLeft p { margin: 0 600px 0 0; }

.divRight { float: right; width: 50%; }
.divRight p { margin: 0 0 0 600px; }

Answer 2

私が考えることができる最も簡単な解決策は、calc()関数を使用することです。

.center,
.side {
  float: left;
}

.center {
  width: 1200px;
}

.side {
  width: -webkit-calc((100% - 1200px) / 2));
  width: calc((100% - 1200px) / 2));
}​

Answer 3

これらの余白にコンテンツを含める必要がある場合はjavascriptを使用し、空白の場合は、margin-left：auto;を使用することをお勧めします。マージン右：自動。

jQueryの場合、次のようなものがページの読み込み/サイズ変更で機能する可能性があります。

<div class="marginClass" id="divLeft"></div>
<div id="divCenter"></div>
<div class="marginClass" id="divRight"></div>
$(".marginClass").css("width", ( $(window).width() - $("#divCenter").width() / 2 ) + "px");

幸運を