0

我正在尝试解决以下 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 中内容的高度如何。当我删除“高度：140px;”时 将父级的 div 打印在彼此的顶部。我认为这是因为代码不知道 leftbit 和 rightbit div 的高度，所以只是让父级没有高度，因此只是在同一个地方打印父级 div。谁能告诉我如何让父 div 承担左右 div 的高度。我可以通过添加额外的函数和一些 Jquery 代码来看到一种方法，但这似乎有点矫枉过正，我想我错过了一种更明显的方法，但我无法解决。谢谢。

4

3 回答 3

1

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

于 2012-08-28T09:42:57.520 回答
1

小提琴

使用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;
}
于 2012-08-28T09:46:16.267 回答
0

如果您希望父级与子级一起自动扩展，那么您应该使用相对定位和基于浮动的布局。将子元素向左浮动，clear: both div在父元素之后指定 a。应该这样做。

于 2012-08-28T09:43:15.617 回答