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/

Answer 2

当你使用浮动时，浮动元素应该在流程中第一个，如果有足够的空间，那么静态可以坐在它们之间：例子

＆＃13;

#one {
  float: left;
  background-color: red;
  width: 300px;
}
#two {
  background-color: blue;
  overflow: hidden;
}
#three {
  background-color: yellow;
  width: 200px;
  float: right;
}
/* demo purpose to show overflow purpose */
div {
  margin:0 5px;
  border:solid;
}

＆＃13;

<div id="one">
  1 i float .Run me full page too
</div>
<div id="three">
  3 i float
</div>
<div id="two">
  2 i'm there
</div>

＆＃13;

Answer 3

由于废话IE版本已经死亡，您可以使用calc safely。 Flexbox有点tricky，但您可以考虑它。

无论如何，使用calc，只需将它们全部浮动并为中间列赋予动态宽度。这很容易。

.col-1 { float: left; width: 200px; }
.col-2 { float: left; width: calc(100% - 200px - 300px); }
.col-3 { float: left; width: 300px; }

结帐this fiddle。

Answer 4

HTML ：

<div class="container">
    <div class="left"></div>
    <div class="right></div>
    <div class="center">Content Goes Here</div>
</div>

CSS ：

.container {
    width: 100%;
}
.left {
    width: 200px;
    float: left;
}
.right {
    width: 300px;
    float: left;
}
center {
    display:block;
    margin-left:auto;
    margin-right: auto;
}

修复左右列，动态中心列

4 个答案: