html - 如何在 div 中设计两个跨度，以便当跨度 1's width increases by x span 2' s 宽度减少 x

Question

假设你有这个:

<div style="width: y px; display: inline-block">
    <span class="one"></span>
    <span class="two"></span>
</div>

是否可以使用 css 设置两个跨度的样式，以便如果跨度“1”的宽度为 x px，则跨度 2 的宽度为 y - x？

谢谢!

Answer 1

这是我可以为您提供的最快的解决方案。

DEMO

该演示将向您展示一些内容，但首先我想在我们检查它时分解我自己的代码。让我们从 HTML 代码开始:

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
</div>

在您的示例中，您使用了跨度。据我所知，span 只会让你在 span 中调整文本长度的宽度。一个例子是 here ，其中我已将跨度的宽度设置为 100px，但它只会显示跨度内的文本宽度。

这让我想到了div的道理，它很简单，你可以用它来完成你所要求的。那么让我们分解一下 CSS 代码:

.wrapper {
    width: 200px;
    background:gray;
    display: inline-block;
    height:20px;
}
.one {
    width:50px;
    background:red;
    height: 20px;
    float:left;
}
.two {
    width:-moz-calc(100% - .one);
    background:black;
    height:20px;
}

对于重命名您的类(class)，我提前表示歉意。在我们分析这段代码之前，我想指出我为每个 div 添加了一个高度变量，这样我就不必在 div 中放置任何东西来检查它。首先，您使用的本能

display:inline-block;

太棒了!接下来是将这些 div float 或定位在同一行上，在这种情况下，您只需要 float 其中一个以确保它们都位于同一行上。接下来，我使用了一个巧妙的小技巧，即 -moz-calc，有关这方面的更多信息可以在 MDN 上找到。的网站。它的要点是，在这种情况下，它将采用其父元素的宽度并减去类“.one”的宽度，检查下面的示例以确切了解我的定位位置。

.two {
    width:-moz-calc(100% - .one);
    background:black;
    height:20px;
}

现在，如果你通过并玩我的 DEMO ，你会很快注意到，如果你改变红色 div 的宽度，它会改变黑色 div 的宽度，进一步完成你需要的:) 如果这不是你想要的，请在下面评论，我们可以找出一些办法: )

我鼓励您尝试使用我的 JsFiddle，以准确了解 div 的作用以及计算器的作用。另外，为了将来引用，这个 site对我一直很有帮助!