Question

左右浮动，我有2个元素。通过填充动态增加或减少的子元素，右元素宽度是动态的！但左元素是一个简单的 DIV 。我希望它的宽度根据右侧元素宽度进行更改。如何通过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，你带有3个孩子的right元素
要填充left元素

这是对的吗？

最简单的方法是在inline-block元素周围包含一个right元素，它代表整个A区域，right元素浮动在这个父元素的右侧。然后，您分配给父级的所有属性将表示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/

上的结果

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

1 个答案: