HTML CSS中，左浮动的div会在右浮动的div下方或下面吗？

Question

我希望有人能帮助我：我有一个左列容器#left-column，它有一个float:left;属性，右侧有一些元素（幻灯片、图像、文本）浮动在右侧。所有内容都放置在主容器中，其宽度为990px；左列宽度为240px，而右侧的所有元素宽度足以适应右侧（720px）。下面是发生的情况：

我该怎么解决？我的猜测是与幻灯片div有关...

图片链接：https://istack.dev59.com/F3Iwj.webp

#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: absolute时，它会直接移到顶部，看起来很好，但这不是我想要的解决方案。

- mlclm

---

需要更多信息，请将其放在http://jsfiddle.net/上。 - David Nguyen

你能提供你使用的HTML吗？ - Rick Hoving

除非我们能看到HTML，否则几乎任何答案都是猜测。 - Adam Botley

@所有人 抱歉，由于它在CMS中，HTML代码太长了无法复制和粘贴。我回答了自己的问题，因为我找到了答案。虽然感谢你们的帮助。 - mlclm

Answer 1

难以理解您具体的情境，没有HTML文件可能会有点困难，但这里提供了一个全局思路：通常情况下，即使这看起来很合理，您也不需要为左列设置float: left;，右列设置float: right;。

更简单、更可靠的方法是将所有将要相邻的元素设置为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; }

- Jérémy Dutheil

---

谢谢您的回复，我找到了解决方案并回答了我的问题。还是谢谢！ - mlclm

Answer 2

感谢所有给我提供解决问题提示和建议的人。在代码中稍微调整了一下后，我发现将左列放在幻灯片之前是解决方案。我错过了一些东西：幻灯片容器在左列之后...基本上页面上的事物顺序不正确。由于这个html代码是通过一些PHP输出的，所以我一开始没有看到它，还要抱歉但几乎不能发布整个html代码，再次感谢大家尝试帮助我。

- mlclm

Answer 3

尝试将主包装器分成两列，如下所示。（我添加了页脚以防您以后需要它） 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>

and for the 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;
}

- Wrostran

---

谢谢你的回复，我找到了解决办法并回答了我的问题。还是谢谢！ - mlclm

Answer 4

检查#left-column和#slideshow的边距。元素的宽度只考虑边框和内边距。您的总宽度为990像素。#left-column是240像素，#slideshow是720像素。240+720等于960像素。因此，如果您有超过30像素的边距，则其中一个元素必须向下移动。

- zsaat14

---

谢谢您的回复，我找到了解决方案并回答了我的问题。还是谢谢！ - mlclm

Answer 5

可以设置

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

或者

尝试减小 #slideshow 的宽度

确保你清晰地指定了浮动的 divs

- Dhaval Marthak

---

谢谢你的回复，我找到了解决办法并回答了我的问题。还是谢谢！ - mlclm

Answer 6

使用负的margin-top属性，值为你的#slideshow高度，来调整#left-column的位置。

- Godinall

---

谢谢您的回复，我找到了解决方案并回答了我的问题。还是谢谢！ - mlclm