CSS：自动拉伸 div 以适应可用的水平空间答案

【问题标题】：CSS: Auto stretch div to fit available horizontal spaceCSS：自动拉伸 div 以适应可用的水平空间
【发布时间】：2015-08-12 21:53:54
【问题描述】：

如何使用 CSS 设置 div 样式以自动适应间隙？目前，我有这样的东西

HTML

<div id="wrapper">
    <div id="auto-width"></div>
    <div id="changing-width"></div>
</div>

CSS

#wrapper {
    padding: 30px;
}

#wrapper * {
    height: 50px;
    display: inline-block;
}

#auto-width {
    width: 271px; /*I don't want to have to set this value*/
}

#changing-width {
    width: 140px;
    float: right;
    margin-left: 30px;
}

我希望 ID 为“auto-width”的 div 根据包装器的填充以及“changed-width” div 的宽度和边距来更改其宽度。我不介意使用填充和边距值，但在我的实际项目中，“更改宽度” div 的宽度实际上会根据其中的文本数量而变化，我希望“自动宽度” div 更改为它。

JSFiddle 示例： https://jsfiddle.net/bve8162f/

【问题讨论】：

从一种风滚草到另一种——我不确定，但你可以看看width: calc()。你能解释一下你的布局的约束吗？ Width 在 css 中是出了名的棘手，但可能有与您想要的不同的解决方案。稍后我会仔细看看这个。
我只是希望左div根据右div的宽度尽可能的长，不定义右div的宽度，因为它会自己拉伸。

标签： css width

【解决方案1】：

如果右div的宽度是固定的，那么你可以像这样设置左div的宽度：

#auto-width {
    width: calc(100% - 200px);
}

...200px 是右侧 div 的宽度加上填充。如果您使用的是像 Less 或 Sass 这样的 CSS 预处理器，您可以创建一个变量，以便您可以在一个地方为两种样式定义值。

请注意，100% 指的是父级的显式宽度。该解决方案似乎在您的小提琴 (updated version here,) 中有效，但如果您的生产代码设置稍有不同，则可能无法正常工作。我会看看我是否能偶然发现一种不同的方法，但这是我个人喜欢使用的一种方法。

【讨论】：

非常感谢您的回答，不幸的是，我猜我的小提琴有点欺骗性。稍后我可能会使用这个事实，所以谢谢你，但在这个例子中，右侧 div 的宽度也不会设置，它会根据其中的文本而改变，如下所示：@ 987654322@ 随着文本的变化，绿色 div 的宽度也会发生变化，我希望红色 div 始终保持相应的正确宽度，但我开始认为这要么是不可能的，要么需要一点 JQuery/JavaScript。