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

Question

如果你看到Fiddle你会理解，我可能需要一些帮助。

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

我想知道如果reduce the green box我是否可以自I increase the content in the yellow box宽度。我希望它纯粹使用HTML和CSS来完成。如果不可能，我会用脚本解决它。

指望你们......

编辑

黄色div不应因添加内容而跳下来。绿色的应该减少

Answer 1

我所做的是制作fixed right div和dynamic left div。我是floating right right 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;
}

现在增加＆＃34;黄色＆＃34;和＆＃34;格林＆＃34;所以你可以看到差异，例如：

http://jsfiddle.net/hm0bqsaL/

http://jsfiddle.net/t47ehnv0/

http://jsfiddle.net/0rgohyve/

http://jsfiddle.net/6mcL5e7y/