孩子採取身體的全寬，而不會突然出現流

我需要爲身體的全角，但不突破流（不使用Javascript）的孩子的CSS。我已經試過這個：孩子採取身體的全寬，而不會突然出現流

position: absolute; 
left: 0; 
width: 100%;

但是這使得孩子突破流量。這裏是一個例子：http://jsfiddle.net/v5Mq4/ 絕對定位的孩子的高度是可變的。因此保證金底部或保證金頂部不適用。

enter image description here

來源

2013-12-20 Alam Kanak

你是什麼意思打破流動？它現在做了什麼？ –

絕對定位的孩子之後出現的孩子元素就好像它不在文檔流中一樣。我想讓絕對定位的孩子在父容器中取其給定的高度。 –

你的html樣子是什麼？中間/全寬度部分不能包含在流程中，因爲它會打破＃父項的框邊界。包括你已經寫的，而不只是任意的CSS。 – Mark

絕對定位將刪除文檔流動的元件。

你可以做你想做的事情，但你必須通過創建相同大小的差距來填寫你的佈局。您可以通過將margin-bottom添加到前一個元素來完成此操作。

來源

2013-12-20 21:28:07

但高度可能會有所不同。我事先不知道高度。 –

這就是JavaScript來的地方。 –

對我來說太糟糕了！ :( –

您可以通過混合使用相對和絕對div來實現此目的。

CSS類

.relative { 
    position: relative; 
    width: 200px; 
    height: 400px; 
    background-color: red; 
} 
.absolute { 
    position: absolute; 
    top: 120px; 
    left: -100px; 
    width: 200%; 
    height: 200px; 
    background-color: black; 
}

和DIVS

<div width='100%' align='center'> 
    <div class='relative'> 
     <div class='absolute'> 
     </div> 
    </div> 
</div>

加上你需要另一個父容器（或機構）爲中心所包含的元素。

下面是一個jsFiddle的解決方案。

http://jsfiddle.net/mgleeson/35vDd/

乾杯。

來源

2013-12-20 21:31:14 Mike

孩子採取身體的全寬，而不會突然出現流

回答

相關問題