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

Question

我需要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 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/

Answer 2

我不知道您的实际需求是什么为中央纵队但如果它是只是为了包含问题背景，你可以不移动ba ckground样式到容器本身？

上意立的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类，以确保容器实际上包含 th e列，以便背景可以显示（这是来自HTML5 Boilerplate版本的clearfix类）。

Answer 3

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

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. 如果您的第一列和第三列包含文本，您需要将它们包装在具有空白区域的DIV中：无覆盖CSS样式
2. 如果您有超过1个填充列，请确保总宽度= 100 ％（例如，2列，使用50％）
3. 您将无法缩小到所需宽度

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