Question

我找到了一个小提琴，似乎正在使用左栏 FIXED ＆amp;右列 FLUID 宽度

<div id=fixedWidth>
Fixed</div>
<div id=theRest>
    The rest of the space<br />The Rest?</div>

#fixedWidth{ 
    width: 200px;
    float: left;
    background: blue;
    position: absolute;
    height: 100%;
}
#theRest{
    background: green;
    padding-left: 200px;
}

但是当我试图通过使左列变得流畅而对它进行修改时右列是固定宽度，然后出现问题。

我试图让左列成为流畅的＆amp; amp;右列为固定宽度，但不起作用。

我所做的是交换他们的css然后将“left”替换为“right”。

这是我修改过的小提琴。

http://jsfiddle.net/gpxeF/1744/

#fixedWidth{ 
    background: green;
    padding-right: 200px;

}

#theRest{
    width: 200px;
    float: right;
    background: blue;
    position: absolute;
    height: 100%;
}

Answer 1

由于您的第二个div位于绝对位置，因此需要添加right:0以使其保持在右侧，而不是float:right。我编辑了你的小提琴，看看：

http://jsfiddle.net/oLuzay16/

我们还可以使用css width:calc(100% - 200px);使容器的第一个div 100％的宽度减去200px，以考虑绝对定位的div。 Calc适用于大多数较新的浏览器，请点击此处查看完整列表：http://caniuse.com/#feat=calc

CSS Left Column fluid＆amp;右栏固定宽度

1 个答案: