html - 3 列、像素和百分比

Question

我想将 2 列粘在两侧，每列都有一个精确的像素宽度（在这种情况下为 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。