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