移位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的问题

回答

相关问题