html – 使用CSS进行3列布局,左/右可变大小,中间流体

我需要3列布局,第一列和第3列是可变的,因为会有图像或一些可变长度的文本(或另一个图像),但我需要中间用背景图像填充剩余空间,如果它会像我一样工作想象一下

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可以这样吗？

解决方法

如果您可以控制标记,并且不介意进行更改,则可以使用表块样式来完成此操作.这是我知道哪种方式可以处理所有场景和调整大小的唯一方法.

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/

要记住以下几点：

>如果第一列和第三列包含文本,则需要将它们包装在具有空白区域的DIV中：无包装CSS样式>如果您有超过1个填充列,请确保宽度总计= 100％(例如,2列,使用50％)>您将无法将列缩小到超出所需的最小宽度