css - HTML CSS div 向左浮动在下面，在 div 向右浮动下方？

Question

我希望有人能帮助我:我有一个左列容器#left-column，带有一个 float:left;一些元素(幻灯片、图像、文本)漂浮在右侧。一切都放在主容器中，主容器的宽度值为 990px​​；左列为 240 像素，而右侧所有元素的宽度足以适合右侧 (720 像素)。这是正在发生的事情的图形:

我该怎么做才能解决这个问题？我的猜测是与幻灯片 div 有关...

#main-container {
    width:990px;
    margin:8px auto;
}
#left-column {
    width:240px;
    float:left;
}
#slideshow {
    float:right;
    width:720px;
    height:300px;
}
a.image {
    float: right;
    display:inline-block;
}
.text {
    float:right;
    width:720px;
}

我该怎么办？非常感谢...!!

编辑 - 当我将 position:asbolute 放入左列容器时，它会直接上升到顶部，看起来不错，但这不是我要寻找的解决方案。

Answer 1

如果没有 HTML，很难具体理解您的上下文，但这是一个全局性的想法:您通常不需要将 float: left; 用于左列，而 float: right; 对于右列，即使这对您来说似乎合乎逻辑。

一种更简单、更可靠的方法是将所有元素放在float: left;上(这样右边的列就会 float 左边，就在左栏附近)

有了你的形象，我会做类似的事情:

<div id="leftColumn">
</div>
<div id="rightColumn">
    <div id="slideshow"></div>
    <div id="imgWrapper">
        <div class="imgDiv"></div>
        <div class="imgDiv"></div>
    </div>
    <div id="text"></div>
</div>


#leftColumn {
    float: left;
    overflow: hidden;
}

#rightColumn {
    float: left;
    overflow: hidden;
}

.imgDiv {
    float: left;
    overflow: hidden;
}

#imgWrapper { overflow: hidden; }