的绝对定位的儿童

一个工作clearfix考虑下面的代码：的绝对定位的儿童

<html> 
<head></head> 
<body> 
    <div id="A"> 
     <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div> 
    </div> 
</body> 
</html>

一个结果有0的高度，无论乙及其内容的大小。我想A根据里面的内容适当地设置其高度B。

这是可以实现与CSS？

到目前为止，我还没有找到任何方式来做到这一点，但我非常确定CSS应该能够处理这个问题，它看起来像一个非常微不足道的事情。

我知道有很多关于实现clearfix的帖子，但它们看起来已经过时了。现在是2016年，也许有新的选择。

重要的东西：这是我想要实现的，我没有写出那么小的布局和那些风格属性偶然。请不要在布局与我介绍的不同的地方提供替代方案。

来源

2016-07-07 almosnow

位置：绝对需要元件断开的流动，所以它是由任何其他元件看不见和有没有像清除绝对或固定元件。 Clearfix的方法是关于浮动元素，JavaScript可以帮助你，但我不知道任何脚本准备好了这种类型... –

你只想在CSS ?.你可以用js吗？ – Thinker

@Thinker我宁愿它在CSS中。 – almosnow

既然您希望A的高度与B中的内容相匹配，您可以通过向A添加display: list-item;来完成。display: list-item;生成内容的块框。

#A { 
 
    background-color: yellow; 
 
    position: relative; 
 
    display: list-item; 
 
}

<div id="A"> 
 
    <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div> 
 
</div>

来源

2016-07-07 20:41:50 rps

谢谢rps，非常有趣的选择，但它没有考虑到像img这样的元素。 – almosnow

的绝对定位的儿童

回答

相关问题