html - 如何设置一个 div 来填充他父项中剩余的空间(水平)？

Question

我最近一直在漫游，想找到一种方法在我的页面中放置两个框，一个宽度恒定 (260 像素)，另一个宽度保持不变。两者都应该在同一条线上，或者至少，它们的顶部是对齐的:

|--------------------------------------------------|
||------------||----------------------------------||
||   260 px   ||         Automatic width          ||
||------------||               text               ||
|              |               here               ||
|              |----------------------------------||
|--------------------------------------------------|

正如您在小解释中看到的那样，我有一个包装器，它始终占页面的 90%。然后，我得到了我的右面板，它必须根据屏幕尺寸进行调整，它的宽度是(100% 的包装)- 260 像素。虽然，我无法做到这一点，即使我尝试了很多不同的想法。这是我的代码:

#wrapper {
    width: 90%;
    margin: auto; /* Center it ! */
    display: block; 
    background-color: gray;
}
#right
    display: block;
    background-color: gray;
    float: left;
    width: auto; /* What can I put here ? */
}
#left { /* This one works more or less flawlessly */
    background-color: gray;
    display: block;
    float: left;
    width: 260px;
}

非常感谢你，
Thomas

Answer 1

你可以使用下面的 css

#right {
    display: block;
    background-color: gray;
    float: left;
    width: calc(100% - 260px);
}

根据 http://caniuse.com/#feat=calc ，这可能适用于所有现代浏览器和 IE9 及更高版本。