css - 元素的动态宽度取决于旁边元素的宽度

Question

我有 2 个元素通过左右浮动彼此相邻。right 元素宽度通过填充子元素动态增加或减少!但是 left 元素是一个简单的 DIV。我希望它的宽度根据 right 元素宽度而改变。如何通过 CSS 完成？

例子:

<div style="float:left"></div>
<div style="float:right;padding:5px 10px;">
    <a>child1</a> 
    <a>child2</a> 
    <a>child3</a> 
</div>

Answer 1

我不是 100% 确定您要实现的目标，但如果我理解正确的话:

• 你有一个区域 A，你在其中 float right 元素和 3 个 child
• 你想用 left 元素填充的区域 A 的其余部分

这是正确的吗？

最简单的方法是在 right 元素周围包裹一个 inline-block 元素，它代表整个 A 区域和 right 元素 float 在此父元素的右侧。然后，您分配给 parent 的所有属性将表示 right 元素未覆盖的区域 A。例如背景颜色:

    <div style="display:inline-block; width:100%; background-color:blue;">
    <div style="float:right; right:0; padding:5px 10px; background-color:yellow;">
        <a>child1</a> 
        <a>child2</a> 
        <a>child3</a> 
    </div>
    </div>

在这里你可以看到 jsfiddle: http://jsfiddle.net/rKQXJ/ 上的结果