CSS 3柱液體布局，帶固定中心柱

Question

我想為我的營銷網站制作一個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>

左/右像素側的圖像是1px×460px。 圖像mybanner.png是1550px x 460px。

提前致謝！ （特別是如果它適用於所有瀏覽器！）

Answer 1

這有用嗎？

僅限CSS演示

jQuery演示（兼容交叉瀏覽器）

<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;
}

您可以使用jQuery而不是使用calc(50% - 250px); 使其與舊版瀏覽器兼容。

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

更新：2018年6月

為同樣的問題添加了flexbox解決方案。

 *{ margin:0; padding:0; } .wrap { display: flex; } #pixelLeft, #pixelRight{ display: flex; flex:1; } #bannerCenter{ background:#ddd; min-width: 500px; display: flex; flex: 1; } #pixelLeft{ background:#999; } #pixelRight{ background:#999; } #bannerCenter,#pixelLeft,#pixelRight{ height: 400px; }

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

Answer 2

這是一個很好的解決方案，在我看來是最簡單的解決方案。 它看起來很干凈，不需要包裝div。

演示

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;
}

請享用！

Answer 3

對此有幾種解決方案，可能是流行的一種是聖杯方法。 它有點高於我的頭腦，但這些鏈接很好地解釋了它。

http://alistapart.com/article/holygrail

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

我將從A List 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 */
}

您需要調整一些維度，但內聯注釋應該有所幫助。 所以你有它。 聖杯布局。

Answer 4

 <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只做這樣的分層結構，即使你要調整瀏覽器的大小，它也會將中間層保持在中心位置。

CSS 3柱液體布局，帶固定中心柱

問題描述

4 個解決方案

解決方案1
16 已采納 2013-06-04 02:58:15

更新：2018年6月

解決方案2
9 2013-07-27 13:32:49

解決方案3
1 2013-06-04 02:50:51

解決方案4
0 2015-02-18 08:29:15

CSS 3柱液體布局，帶固定中心柱

問題描述

4 個解決方案

解決方案1 16 已采納 2013-06-04 02:58:15

更新：2018年6月

解決方案2 9 2013-07-27 13:32:49

解決方案3 1 2013-06-04 02:50:51

解決方案4 0 2015-02-18 08:29:15

解決方案1
16 已采納 2013-06-04 02:58:15

解決方案2
9 2013-07-27 13:32:49

解決方案3
1 2013-06-04 02:50:51

解決方案4
0 2015-02-18 08:29:15