3列，像素和百分比

Question

我想要有兩列卡在邊​​上，每一列都有一個精確的像素寬度（在這種情況下是30像素），並且在它們之間有另一個div來填充剩餘的空間。

|-----------100%-----------| 
|30px || remaining ||30px | 

+-----++------------++-----+ 
|  ||   ||  | 
|  ||   ||  | 
| 1 ||  2  || 3 | 
|  ||   ||  | 
+-----++------------++-----+ 
    |      | 
    |      -- float:right 
    ---- float:left 

我怎樣才能實現這個只有純CSS？

Answer 1

你真的沒有做其他比飄起了什麼右和左divs。您放入的任何div都會自動填充剩餘的空間。

<div class="right"></div> 
<div class="left"></div> 
<div class="center"></div>​ 


.right{ 
float:right; 
background-color:yellow; 
height:50px; 
width:30px; 
} 
.left{ 
float:left; 
background-color:yellow; 
height:50px; 
width:30px; 
} 
.center{background-color:green;height:100%;height:50px;} 

小提琴：http://jsfiddle.net/calder12/55dza/

Answer 2

您的中心div可以絕對定位，並且距離雙方有30px的偏移量。

.container{ 
    position:relative; 
    width:600px; 
    height: 400px; 
} 
.center{ 
    position:absolute; 
    left:30px; 
    right:30px; 
    height: 100%; 
} 

這將確保你有一個div總是佔用div容器的100％，但留下30像素每邊

Answer 3

#left { background-color: Red; width: 30px; height: 500px; float: left; }

#middle { background-color: blue; height: 500px; }

#right { background-color: Red; width: 30px; height: 500px; float: right; }

在HTML

你把左邊的DIV，然後右邊，然後再中間格。

Answer 4

使用此表

<table border="1"> 
    <tr> 
     <td class="fixed"> 
      left 
     </td> 
     <td class="remaining"> 
      middle 
     </td> 
     <td class="fixed"> 
      right 
     </td> 
    </tr> 
</table>​ 

試試這個CSS

table { width: 100%; } 
.fixed { width: 30px; } 
.remaining { width: auto; }​ 

jsFiddle