html - 通过将内容添加到另一个 div 来自动减少 div 的宽度

Question

如果您看到 Fiddle，我可能需要一些帮助你会明白的。

<div class="container">
    <div class="a">Green</div>
    <div class="b">Yellow</div>
</div>

我想知道如果我增加黄色框中的内容，我是否可以自动减小绿色框宽度。我希望它完全使用 HTML 和 CSS 来完成。如果不可能，我将使用脚本解决它。

指望你们......

编辑

黄色的div不应该因为内容的增加而往下跳。绿色的应该减少

Answer 1

我所做的是制作一个固定的右侧div和一个动态的左侧div。我通过向右浮动右div来做到这一点，但我把它放在第一位。

<div class="container">
    <div class="b">Yellow Yellow Yellow</div>
    <div class="a">Green Green</div>
</div>

然后对 CSS 进行一些简单的更改:

.a {
    border:2px solid green;
    overflow:hidden;
}
.b {
    float:right;
    border:2px solid yellow;
}

现在增加“黄色”和“绿色”的数量，以便您可以看到差异，例如:

http://jsfiddle.net/hm0bqsaL/

http://jsfiddle.net/t47ehnv0/

http://jsfiddle.net/0rgohyve/

http://jsfiddle.net/6mcL5e7y/