使用CSS实现三栏布局，左右列宽度可变，中间列自适应宽度。

Question

我需要一个三列布局，第一列和第三列的大小是可变的，因为可能会有图像或某些可变长度的文本（或另一个图像），但我需要中间填充其余空间，使用背景图像，如果可以的话，类似于这样：

HTML:

<div class="left-vp">
   <img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">

</div>
<div class="right-vp">
<p>
    //some text here or another img
</p>
</div>

CSS（层叠样式表）

 .left-vp {
    float: left;
 }

 .mid-vp {
    height: 2px;
    background: #FFFFFF url("images/dot.png") repeat-x;
    width: 100%;
 }
 .right-vp {
    float: right;
 }

这种情况是否可以使用CSS实现？

- sanjuro

---

我更新了我的答案，加入了更清晰的示例。如果有帮助，请告诉我，谢谢。 - Andrew

Answer 1

如果您可以控制标记，并且不介意进行更改，您可以使用表格块样式来实现此目的。这是我所知道的唯一能够处理所有情况和调整大小的方法。

HTML

<div class="container">
  <div>
    <div class="col col1">
      <div class="nowrap">Column 1</div>
    </div>
    <div class="col col2 fill center">
      <div class="nowrap">Column 2</div>
    </div>
    <div class="col col3">
      <div class="nowrap">Column 3</div>
    </div>
  </div>
</div>

CSS，即层叠样式表。

.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }

.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }

.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }

实际操作：http://jsfiddle.net/Vxc3n/1/

需要注意以下几点：

1. 如果您的第一列和第三列包含文本，则需要将它们包装在具有white-space: no-wrap CSS样式的DIV中
2. 如果您有多个填充列，请确保它们的宽度总和为100％（例如，2列，请使用50％）
3. 您将无法将列缩小到所需的最小宽度以下

- Aaron Averill

Answer 2

HTML

<div id="container">
   <div id="left"></div>
   <div id="right"></div>
   <div id="center"></div>
</div>

CSS

#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px;  background-color: blue;}

实战演练 -> http://jsfiddle.net/5xfR9/39/

- Eriks

---

实际上这是问题所在 http://jsfiddle.net/5xfR9/44/ 当我不知道大小时，我无法指定左侧或右侧的大小，因为有一张可以变化大小的图片，请看右列，它在中心列下面，这不是预期的。 - sanjuro

Answer 3

我不确定您对于中央列的实际要求是什么，但如果只是为了像问题中那样包含一个背景，您是否可以将背景样式移动到容器本身？

在Eriks的jsfiddle上进行扩展：http://jsfiddle.net/5xfR9/46/

HTML

<div id="container" class="clearfix">
  <div id="left">some text</div>
  <div id="right">some text</div>
</div>

CSS

#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }


.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

我已经添加了一个clearfix类，以确保容器实际上包含列，以便背景可以透过显示（这是来自HTML5 Boilerplate版本的clearfix类）。

- sleepingkiwi

---

我也考虑过这个问题，但是问题在于如果你在左侧图像或右侧图像上应用边距，它不会反映为背景图像将溢出这些边距，而且如果右侧是文本div，则背景图像也将可见。 - sanjuro

Answer 4

你只需要调整min-width和max-width属性，直到达到你想要的效果。当你将列的最大宽度设置为body或wrap的百分比时，这似乎是最容易实现的。

以下是我制作的一个可行示例：

http://jsfiddle.net/76Ep3/1/

HTML

<div id="wrap">
    <div id="left">LEFT content...</div>
     <div id="center">CENTER content...</div>      
    <div id="right">Right content</div>
</div>

CSS

 *{margin:0;padding:0;}

body, html{
    height:100%;
}

#wrap {
    min-width:390px;
    height:100%;
}

#left{
    float:left;
    min-width:100px;
    max-width:37%;
    margin:0 auto;
    background-color:blue;
    height:100%;
}

#center {
    float:left;
    min-width:100px;
    max-width:20%;
    background-color:red;    
    height:100%;
}

#right {
    float:left;
    min-width:100px;
    max-width:37%;
    background-color:yellow;
    height:100%;
}

- Andrew