使用CSS進行3列布局，左/右可變大小，中間流體

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/

要記住以下幾點：

1. 如果第一列和第三列包含文本，則需要將它們包裝在具有空白區域的DIV中：無包裝CSS樣式
2. 如果您有超過1個填充列，請確保寬度總計= 100％（例如，2列，使用50％）
3. 您將無法將列縮小到超出所需的最小寬度

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/

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