3列，像素和百分比

Question

我希望两侧贴有两列，每列都有一个精确的像素宽度（本例中为30px），另外还有另一个填充剩余空间的div。

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

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

如何只使用纯CSS来实现这一目标？

Answer 1

您的中心div可以绝对定位，并且两侧的偏移量为30px。

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

这将确保你的div总是占据容器div的100％，但每边留下30px

Answer 2

除了浮动左右div之外，你真的不需要做任何其他事情。您放入的任何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 3

使用此表

<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

Answer 4

#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，然后是右边然后是中间的div。