CSS布局百分率值

我试图找出CSS的以下位：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的高度是自动的，使得它们叠起来无论内容在左右位divs中的高度如何，都可以一个接一个。当我删除'height：140px;'时排行父母divs打印在彼此的顶部。我认为这是因为代码不知道leftbit和rightbit divs的高度，所以只需要父级没有高度，因此只需在同一位置打印父级div。任何人都可以告诉我如何让父div采取左，右divs的高度。我可以通过添加额外的函数和一些Jquery代码来看到一种方法，但这看起来像是矫枉过正，我想我错过了一个更明显的方式来做到这一点，但我无法解决这个问题。谢谢。

来源

2012-08-28 Columbo

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; 
}

来源

2012-08-28 09:46:16 Dipak

感谢Dipaks，为我工作。 – Columbo

不客气！ :) – Dipak

您应该使用float而不是绝对值，然后在您的父母上添加一个clearfix并且它将遵循儿童的身高。

来源

2012-08-28 09:42:57 LeBen

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

来源

2012-08-28 09:43:15 SexyBeast

CSS布局百分率值

回答

相关问题