浮动左边的HTML CSS div下面，div下面浮动吗？

Question

我希望有人可以帮助我：我有一个左栏容器＃left-column，浮动：左;和一些浮动在右侧的元素（幻灯片，图像，文本）。一切都放在主容器中，宽度值为990px​​;左列是240px，而右边的所有元素都有宽度，足以适合右侧（720px）。这是正在发生的事情的图形：

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

#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;
}

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

编辑 - 当我放置一个位置：asbolute到左列容器时，它直接上升到顶部，看起来很好，但这不是我正在寻找的解决方案。

Answer 1

如果没有HTML，很难明确了解您的上下文，但这是一个全局性的想法：您通常不需要为左列添加float: left;，而为右列添加float: right;，即使这对你来说似乎合乎逻辑。

更简单，更可靠的方法是将{strong>所有元素放在float: left;上彼此相邻的元素上（因此右列会向左浮动，就在左边附近）列）

有了你的形象，我会做那样的事情：

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

Answer 2

检查＃left-column和#slideshow的边距。元素的宽度仅考虑边框和填充。你的总宽度是990px​​。 #left-column是240px，#slideshow是720px。 240 + 720是960px。因此，如果您的保证金超过30px，其中一个元素必须向下移动。

Answer 3

尝试将主包装器分成2个col，就像这样。 （我添加一个页脚，你以后需要它）

Codepen

然后将其他div放在

中

<div id="main-container">
 <div id="left-column">left-column</div> 

 <div id="right-column">right-column</div> 


 <div id="footer">footer</div> 


</div>

和css

#main-container {
    width:990px;
    background-color: #3d3d3d;
}
#left-column {
    width:240px;
    float:left;
  height:300px;
  background-color: red;
  margin-left: 15px;
}
#right-column {
    width:720px;
    height:300px;
      float:left;
    background-color: green;
}
#footer {
    clear: both;
    width:990px;
    height:50px;
  background-color: orange;
}

Answer 4

感谢所有给我一些提示和提示来解决我的问题的人。在代码中使用abit之后，我发现在幻灯片放映之前放置左列是解决方案。我错过了一些东西：幻灯片放映容器位于左栏之后......基本上页面上的内容顺序不正确。由于这个html代码已经输出了一些PHP，我起初并没有看到它，也很抱歉但很难发布整个html代码，感谢大家，尽管我非常感谢你的回复试图提供帮助。

Answer 5

设置

vertical-align:top; //to left column `#left-column`

或

尝试减少#slideshow宽度

确保您明确浮动divs

Answer 6

使用＃left-column的减去margin-top和#slidshow height的值