固定列のCSS 3列液体レイアウト

私のマーケティングサイトは、トップバナーの画像を持つ3列のレイアウトにしたいと思っています。固定列のCSS 3列液体レイアウト

私は液体の左/右の側面に固定されたセンターを持ちたいと思います。 HTMLは、理想的には、次のようになります。

<div id="pixelLeft">&nbsp;</div> 
<div id="bannerCenter"> 
    <img src="images/mybanner.png" /> 
</div> 
<div id="pixelRight">&nbsp;</div> 

<style> 
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; } 
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; } 
#bannerCenter { /* something here to make fixed width of 1550px */ } 
</style>

左/右ピクセル側の画像は、x 640x460ピクセルの1ピクセルです。イメージmybanner.pngは1550ピクセルx 460ピクセルです。

ありがとうございます！（特にすべてのブラウザで動作する場合）

出典

2013-06-04 Adam Levitt

この情報は役に立ちましたか？あなたが代わりに古いブラウザのために互換性を持たせるようにしcalc(50% - 250px);を使用するのではjQueryを使用することができます

CSS Only Demo

jQuery Demo(Cross Browser Compatible)

<div class="wrap"> 
    <div id="pixelLeft">&nbsp;</div> 
    <div id="bannerCenter"> 
     <img src="images/mybanner.png" /> 
    </div> 
    <div id="pixelRight">&nbsp;</div> 
</div> 
<div style="clear:both;"></div> 

*{ 
    margin:0; 
    padding:0; 
} 
#bannerCenter{ 
    background:#ddd; 
    width: 500px; 
    float:left; 
} 
#pixelLeft{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:left; 
} 
#pixelRight{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:right; 
} 

#bannerCenter,#pixelLeft,#pixelRight{ 
    height: 400px; 
}

。

$(document).ready(function() { 
    $(window).on('resize', function() { 
     $('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2); 
    }).trigger('resize');  
});

出典

2013-06-04 02:58:15

これは非常に近いですが、IE7で試してみましたが、すべて左に移動しました...これは非常に洗練されたソリューションで、私が探しているものです。その最後のビットを修正できますか？ありがとうございました！！ –

** + 1 **パーフェクト:) –

これは最初からうまくいきますが、ウィンドウのサイズ変更を開始すると少しぎこちないものになります。 –

これにはいくつかの解決策がありますが、ポストの人気はHoly Grailメソッドです。それは私の頭の少し上ですが、これらのリンクはそれをかなりうまく説明します。

http://alistapart.com/article/holygrail

http://matthewjamestaylor.com/blog/perfect-3-column.htm

私はリストApartの記事で開始します。がんばろう。

再読み、それの後、私は、これは私がどうなるのかだと思う：あなたはいくつかを調整する必要があります

HTML

<div id="header"> 
</div><div id="container"> 
    <div id="center" class="column"></div> 
    <div id="left" class="column"></div> 
    <div id="right" class="column"></div> 
</div><div id="footer"></div>

CSS

body { 
    min-width: 550px;  /* 2x LC width + RC width */ 
} 
#container { 
    padding-left: 200px; /* LC width */ 
    padding-right: 150px; /* RC width */ 
} 
#container .column { 
    position: relative; 
    float: left; 
} 
#center { 
    width: 100%; 
} 
#left { 
    width: 200px;   /* LC width */ 
    right: 200px;   /* LC width */ 
    margin-left: -100%; 
} 
#right { 
    width: 150px;   /* RC width */ 
    margin-right: -150px; /* RC width */ 
} 
#footer { 
    clear: both; 
} 
/*** IE6 Fix ***/ 
* html #left { 
    left: 150px;   /* RC width */ 
}

インラインコメントはそれに役立つはずです。それであなたはそれを持っています。聖杯のレイアウト。

出典

2013-06-04 02:50:51 micuik

投稿に感謝しますが、最初のものは実際には後方にあります。私は中心を固定し、側方の流体を持つようにしています。 –

ここでは、私の意見では最も簡単な解決策があります。それはきれいに見え、ラッパーdivは必要ありません。

Demo

HTML

<body> 

<div id="left_container"> 
    <div id="left"> 
     left content 
    </div> 
</div> 

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

<div id="right_container"> 
    <div id="right"> 
     right content 
    </div> 
</div> 

</body>

CSS

#left_container { 
    width:50%; 
    float:left; 
    margin-right:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 200px; 
} 
#left { 
    margin-right:480px; /* half of the center container width */ 

    /* not important */ 
    background: #888; 
    height: 600px; 
} 
#center { 
    width:960px; /* size of the fixed width */ 
    float:left; 

    /* not important */ 
    color: #FFF; 
    background: #333; 
    height: 500px; 
} 
#right_container { 
    width:50%; 
    float:right; 
    margin-left:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 300px; 
} 
#right { 
    margin-left:480px; /* half of the center container width */ 

    /* not important */ 
    height: 300px; 
    background-color: #888; 
}

お楽しみください！ここで

出典

2013-07-27 13:32:49 Armand

素晴らしいソリューションですが、JSやCSS3のマークアップを必要としません。 –

ありがとう！また、#left_containerにはmargin-left：autoが必要です。そうでない場合は左側に移動します。 – liepumartins

ありがとう、これは私のモバイルメニューでうまくいきました。 – Scott

<body> 
 
    <div style=" width: 200px; float: left; background: red; height: 100px;">Left</div> 
 
    
 
    <div style=" float: right; width: 200px; background: red; height: 100px;">Right</div> 
 
    <div style=" background: blue; margin:0 auto; height:100px;">Center content goes here</div> 
 
</body>

のみ、このような層状構造を行うためにHTMLとCSSによる簡単なトリックであり、それはあなたがブラウザのサイズを変更します場合でも、中央に中間層を維持します。

出典

2015-02-18 08:29:15 Optimus

固定列のCSS 3列液体レイアウト

答えて

関連する問題