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

时间:2013-03-26 08:36:16

标签: css width

左右浮动,我有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>

1 个答案:

答案 0 :(得分:2)

我不是100%肯定你想要实现的目标,但如果我理解正确的话:

  • 你有一个区域A,你带有3个孩子的right元素
  • 要填充left元素
  • 的区域A的其余部分

这是对的吗?

最简单的方法是在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/

上的结果