【问题标题】：CSS 3 column liquid layout with fixed center column具有固定中心列的 CSS 3 列液体布局
【发布时间】：2013-06-04 02:34:17
【问题描述】：

我想为我的营销网站制作一个 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 x 460px。图片 mybanner.png 为 1550px x 460px。

提前致谢！（特别是如果它适用于所有浏览器！）

【问题讨论】：

标签： html css layout liquid-layout

【解决方案1】：

这有用吗？

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

您可以使用 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>

【讨论】：

这非常接近，但我在 IE7 中尝试过，它都向左移动了......这是一个非常优雅的解决方案，也是我正在寻找的。我们可以修复最后一点吗？谢谢！！
这在开始时看起来确实不错，但是当我开始调整窗口大小时，事情变得有点笨拙。
无法理解该答案是如何获胜的）有一个更好的css示例，无需计算，也无需JS。所以这个答案的作者提供了一个糟糕的解决方案。对不起，但这是真的，或者我不明白这个问题。但是我们可以在没有垃圾的情况下进行 1fixed-1liquid-1fixed 布局。请参阅此处的示例dynamicdrive.com/style/layouts
@Rantiev - 你不明白这个问题。他要求 1liquid-1fixed-1liquid，与你所说的相反。

【解决方案2】：

这是一个很好的解决方案，在我看来是最简单的一个。它看起来很干净，不需要包装 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;
}

享受吧！

【讨论】：

很好的解决方案，它不需要任何 JS 或 CSS3 标记。
谢谢！我还要注意#left_container 应该有margin-left:auto，否则它会移动到左侧。
谢谢，这对我的移动菜单很有帮助，效果很好
更新，我遇到了固定宽度中心元素的问题，我想让它可点击，但容器上的负左右边距阻止了这一点。为了解决这个问题，我将中心元素设为绝对元素，以便它具有更高的 z-index 并且现在可以点击：#center { position: absolute;左边距：49%； }

【解决方案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 */
}

您需要调整一些尺寸，但内联 cmets 应该会有所帮助。所以你有它。圣杯布局。

【讨论】：

感谢您的帖子，但第一个实际上是倒退的。我希望中心固定而侧面流动。

【解决方案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 只做这样一个分层结构，即使你调整浏览器大小，它也会保持中间层居中。

【讨论】：