Question

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

HTML

#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;
}

CSS

{{1}}

我希望div具有ID＆＃34;自动宽度＆＃34;根据包装纸的填充物改变它的宽度，以及改变宽度＆＃34;的宽度和边距。 DIV。我不介意使用填充和边距值，但在我的实际项目中，＆＃34;更改宽度＆＃34;的宽度。 div实际上会根据其中的文本数量而改变，我希望＆＃34;自动宽度＆＃34; div随之改变。

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

Answer 1

如果右侧div的宽度是固定的，那么您可以设置左侧div的宽度，如下所示：

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

...其中200px是右边div的宽度加上填充。如果你正在使用像Less或Sass这样的css预处理器，你可以创建一个变量，这样你就可以在两个样式的一个地方定义值。

请注意，100%指的是父级的显式宽度。这个解决方案似乎适用于您的小提琴（updated version here），但如果您的生产代码设置略有不同，这可能无效。我会看到我是否能够以不同的方式偶然发现，但这是我个人喜欢的方法。

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

1 个答案: