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