css - 当一个固定大小时，如何使并排的块填充容器的其余部分？

Question

我有两个并排的街区。一种尺寸是固定的，90px而另一种则不是，我希望另一种能够将自身扩展到容器的其余部分，因为容器的尺寸会发生变化。

这是显示问题的推荐：http: //jsfiddle.net/L6CSG/

HTML

<div class="container">
    <span class="left"></span>
    <span class="right"></span>
</div>

CSS

.left, .right {
    height: 30px;
    display: inline-block;
    margin: 0px;
    float: left;
}

.left {
    background: green;
    width: 90px;
}

.right {
    background: blue;
    width: 100%; // How can I make it fit the rest of the container?
}

.container {
    width: 400px; // This value is NOT STATIC
}

Answer 1

解决方案1：

使宽度为.right width: calc(100% - 90px);

解决方案2：

http://jsfiddle.net/L6CSG/4/在这种解决方案的情况下，您可能应该使用 div 而不是 span，因为我将您的 span 更改为块元素。

Answer 2

您可以通过纯 CSS 来完成，这里是工作示例jsFiddle

1. 确保填充物element在 DOM 树中位于最后
2. 确保其余元素已position: relative指定且宽度+高度

这是我学到的好技巧：

HTML：

<div id="container">
    <div class="left"></div>
    <div class="rest"></div>
</div>

CSS：

#container {
    width:50%;
    height: 50px;
    background-color: red;
    min-width: auto;
}
.left {
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    background: blue;
}
.rest {
    display: block;
    height: 100%;
    overflow: hidden;
    background: yellow;
}

Answer 3

这是解决方案：

HTML：

<div class="container">
<span class="left"></span>
<span class="right"></span>
</div>

CSS：

.left, .right {
    height: 30px;
    margin: 0px;
    display: block;
}

.left {
    background: green;
    width: 90px;
    float: left
}

.right {
    background: blue;
    width: auto;
}

.container {
    width: 400px; 
}

Answer 4

你float: left只需要设置左边的

查看结果：http: //jsfiddle.net/L6CSG/2/

你也需要display: block和width: auto正确的

Answer 5

需要 JavaScript 来计算可以填充的额外空间，因为容器不是固定宽度。

var con = document.querySelector(".container");
var left = document.querySelector(".left");
var right = document.querySelector(".right");

window.addEventListener('resize', function() {
   calcSize(); 
});

function calcSize() {
    var diff = con.offsetWidth - left.offsetWidth;
    right.style.width = diff + "px";
}

calcSize();

http://jsfiddle.net/L6CSG/7/