html - 修复左右列，动态中心列

我正在尝试进行三列布局，其中：

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;
}

最佳答案

我将执行以下操作：将容器设置为想要的宽度，将左列和右列设置为想要固定的大小，然后根据容器的宽度在左侧和右侧设置容器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/

关于html - 修复左右列，动态中心列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38087761/