我可以在另一个旁边放置一个固定宽度的 div 来填补类似于 * 的空白吗答案

【问题标题】：Can i place a fixed width div next to another one that will fill the gap similar to *我可以在另一个旁边放置一个固定宽度的 div 来填补类似于 * 的空白吗
【发布时间】：2014-03-27 19:41:17
【问题描述】：

使用 flex 框我可以连续有 2 个 div，一个具有固定宽度（比如宽度：200px），然后另一个 div 以流畅的方式填充其余空间，就像 asterex 在 Frames 中所做的那样？

【问题讨论】：

一定要用flex box吗？
你不能让它漂浮吗？
div { min-width: 200px; } div + div { flex-grow: 1; }

标签： css flexbox

【解决方案1】：

以下是使用灵活盒模型的方法：

#container {
    display: flex;
    width: 500px; /* Set the available space */
}

#container > div#first {
    width: 200px;    
}

#container > div#second {
    flex-grow: 1;
}

见小提琴here。

【讨论】：

非常感谢大家！我实际上也对 calc 解决方案感到好奇！但我相信 Calc 并没有得到广泛支持
@dougmays calc 实际上似乎比 flexbox 有更好的浏览器支持。虽然不是很多......
@DrydenLong 是的，我注意到在我发布该评论后哈哈。

【解决方案2】：

您可以使用float 和calc 来创建类似的东西。这是一个例子：

HTML

<div id="one"></div>
<div id="two"></div>

CSS

#one {
    width:200px;
    height:200px;
    background-color:red;
    float:left;
}
#two {
    width:calc(100% - 200px);
    height:200px;
    background-color:blue;
    float:left;
}

还有一个展示它的小提琴：http://jsfiddle.net/mQ2JX/

【讨论】：

它可以工作，但会对浏览器造成负担，并且在旧版浏览器中不受支持。
@Chad 关于在旧版浏览器上的支持是对的，但我认为由于 OP 使用的是flex，他们并不真正关心旧版浏览器的支持。至于对浏览器征税，我没有看到任何数字表明，你有消息来源吗？
我没有消息来源，但只是在每次调整大小时不断计算一个数字的理论在理论上更费力，尽管可能并不总是很明显。
@Chad 无论如何，浏览器都必须将所有内容转换为真实像素值，因此进行数学运算可能很简单。我怀疑它比通过 Javascript 消耗更多的资源。