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佈局百分率值

回答

相關問題