Question

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

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/

要记住的一些事项：

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

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

实际行动 - ＆gt; http://jsfiddle.net/5xfR9/39/

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类）。

Answer 4

您只需要使用最小宽度和最大宽度属性，直到获得所需内容。当你给列的最大宽度作为主体或包裹的百分比时，它似乎最容易工作。

这是我放在一起的一个工作示例：

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

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

4 个答案: