Question

我正在尝试研究以下CSS：

<style type="text/css">
.parent {
    position: relative;
    height: 140px;
}
.parent .leftbit {
    width: 370px;
    position: absolute;
    top: 0px; left: 0px;
}
.parent .rightbit {
    width: 220px;
    position: absolute;
    top: 0px; left: 370px;
}

</style>
<div class="parent">
    <div class = "leftbit">abcdef</div>
    <div class = "rightbit">111111</div>
</div>


<div class="parent">
    <div class = "leftbit">ghijk</div>
    <div class = "rightbit">222222</div>
</div>

这很好用但是我希望div的高度是自动的，这样它们就可以一个接一个地堆叠起来，而不管左边和右边div中内容的高度。当我删除'height：140px;'将div打印在父对象的顶部。我假设这是因为代码不知道leftbit和rightbit div的高度，所以只是让父节点没有高度，因此只是在同一个地方打印父div。任何人都可以告诉我如何让父div占据左右div的高度。我可以通过添加额外的函数和一些Jquery代码来看到这样做的方法，但这看起来有点矫枉过正，我想我错过了一个更明显的方法去做但我无法解决它。感谢。

Answer 1

您应该使用float而不是absolute，然后在您的父级上添加clearfix，它将跟随孩子的身高。

Answer 2

Fiddle

使用float代替position: absolute;

.parent {
    position: relative;
    border: 1px solid #f00; overflow: hidden;
}
.parent .leftbit {
    width: 370px;    
    top: 0px; float: left;
}
.parent .rightbit {
    width: 220px;
    top: 0px; float: right;
}

Answer 3

如果您希望父级自动扩展子级，则应使用相对定位和基于浮动的布局。将子项浮动，在父元素后面指定clear: both div。应该这样做。

具有高度百分比的div的CSS布局

3 个答案: