移位div的問題

我在網頁上有三列。一個在左側。其他在中心，最後一個在右側。我想將左側div下方的右側div（左側div是一個可展開的div）。移位div的問題

但問題是，正確的div和中心div有相同的父div。左邊的div和右邊和中間的div的父母具有相同的父代。這就是我的意思是說 -

<container> 
    <leftContainer> 
     <leftColumn> 
    <mainContent> 
     <rightColumn> 
     <centerColumn>

而且我想給<rightColumn>轉移<leftColumn>下方。可能嗎？

此外，由於我正在處理自定義用戶樣式表，我無法更改代碼，我只能修改CSS。

我該怎麼做？

來源

2011-05-18 Prashant Baid

如果知道左側div的高度，則可以在每個div上使用float: left，然後在左側欄的高度centerColumn上使用負數margin-height。

Example：< - 點擊演示

<div id="container"> 
    <div id="left_container"> 
     <div id="left">left</div> 
    </div> 
    <div id="right_container"> 
     <div id="right">right</div> 
     <div id="middle">middle</div> 
    </div> 
</div> 

<style type="text/css"> 
#container { 
    width: 160px; 
} 

#left { 
    float: left; 
    width: 80px; 
    height: 100px; 
    background-color: #eee; 
} 

#right { 
    clear: left; 
    float: left; 
    width: 80px; 
    height: 100px; 
    background-color: #ccc; 
} 

#middle { 
    float: right; 
    width: 80px; 
    height: 100px; 
    margin-top: -100px; 
    background-color: #aaa; 
} 
</style>

來源

2011-05-18 03:05:59 dtbarne

感謝隊友。它爲我工作。但是如果左邊的div是可擴展的div，我不知道它的高度呢？ – 2011-05-18 05:32:54

解決方法之一是在檢索左列的高度後使用javascript更新margin-top值。 – dtbarne 2011-05-18 05:54:27

margin-top：-100％;爲我工作。 – 2011-05-18 05:57:24

我不相信這是可能的「簡單」修復。你可以把div看作盒子，你想要做的是把中間的列保留在左邊的列的右邊，同時把右邊的列放在下面（這會扭曲盒子）。

有一種修復方法，您可以將rightColumn的位置設置爲絕對值，並設置列相對於窗口本身的位置。但是，我不建議你這樣做。相反，你應該修改css，並將右列放在與左列相同的父div中。

來源

2011-05-18 03:03:48 systemizer

移位div的問題

回答

相關問題