html - 固定左右栏，动态中心栏

Question

我正在尝试制作一个三列布局，其中:

left-column fixed width: 200px
right-column fixed width: 300px
center-column dynamic width;

我似乎无法让它工作。这是我目前所拥有的:

#one {
    float:left;
    background-color: red;
    width: 300px;
    height: 20px;
}

#two {
    background-color: blue;
    height: 20px;
    margin: 0 200px 0 300px;
}

#three {
    position: relative;            
    background-color: yellow;
    width: 200px;
    height: 20px;
    float: right;            
}

Answer 1

我会这样做:让你的容器成为你想要的任何宽度，让你的左列和右列成为你想要固定的任何大小，然后在左边给容器 padding并根据两个容器的宽度。中间容器将是容器宽度的 100%，容器现在由于填充而正在缩小。

HTML

<div class="container">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

CSS

.container {
    width:100%;
    position:relative;
    padding:0 300px 0 200px;
    box-sizing:border-box;
}
.col:nth-of-type(1) {
    width:200px;
    position:absolute;
    left:0;
    top:0;
    background-color:yellow;
}
.col:nth-of-type(3) {
    width:300px;
    position:absolute;
    right:0;
    top:0;
    background-color:blue;
}
.col:nth-of-type(2) {
    width:100%;
    background-color:green;
}

https://jsfiddle.net/