Question

我在网页上有三列。一个在左手边。其他在中心，最后一个在右手边。我想在左侧div下方移动右侧div（左侧div是一个可扩展的div）。

但问题是正确的div和中心div具有相同的父div。左侧div和右侧和中间div的父级具有相同的父级。这就是我的意思 -

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

我想将<rightColumn>转移到<leftColumn>以下。有可能吗？

另外，由于我正在处理自定义用户样式表，我无法更改代码，我只能修改CSS。

我该怎么做？

Answer 1

我不相信这可以通过“简单”修复来实现。您可以将div视为框，并且您要做的是将中间列保持在左列的右侧，同时将右列放在下面（这会扭曲框）。

有一个修复程序，您可以将rightColumn位置设置为绝对位置，并设置列相对于窗口本身的位置。但是，我不建议你这样做。相反，您应该修改css并将右列放在与左列相同的父div中。

Answer 2

如果你知道左边div的高度，你可以float: left每个div，然后在左列高度的centerColumn上使用负margin-height。

Example：＆lt; - 点击演示

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

转移div的问题

2 个答案: