HTML CSS div 向左浮动，下方 div 向右浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20075236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML CSS div floating left goes under , below div floating right?
提问by mlclm
I'm hoping someone can help me: I have a left column container #left-column, with a float:left; and some elements (slideshow, images, text) floating on the right. Everything is placed in the main container which has a width value of 990px; The left column is 240px, while all the elements on the right have widths which are enough to fit on the right side (720px). Here is a graphic of what is happening:
我希望有人可以帮助我：我有一个左列容器 #left-column，带有一个 float:left; 以及浮动在右侧的一些元素（幻灯片、图像、文本）。一切都放在主容器中，其宽度值为 990px；左列是 240 像素，而右边的所有元素的宽度都足以适合右侧 (720 像素)。这是正在发生的事情的图表：
What can I do to solve this ? My guess is that there is something to do with the slideshow div...
我能做些什么来解决这个问题？我的猜测是与幻灯片 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;
}
What should I do ? MANY thanks...!!
我该怎么办 ？非常感谢...！！
EDIT - When I put a position:asbolute to the left-column container, it goes straight up to the top, which looks fine , but this is not the solution I'm looking for.
编辑 - 当我将 position:asbolute 放置到左列容器时，它会直接上升到顶部，看起来不错，但这不是我正在寻找的解决方案。
采纳答案by mlclm
Thanks to everybody who gave me some tips and hints to solve my problem. After messing around abit in the code I found that placing the left column BEFORE the slideshow was the solution. Something I missed: the slideshow container was after the left column... Basically the order of things on the page was not right. As this html code is outputed with some PHP I didn't see it at first, also sorry but could hardly post the whole html code, thanks to everybody though I really appreciated your replies trying to help.
感谢所有给我一些提示和提示来解决我的问题的人。在代码中乱搞之后，我发现在幻灯片放映之前放置左列是解决方案。我错过了一些东西：幻灯片容器在左列之后......基本上页面上的顺序不正确。由于此 html 代码是用一些 PHP 输出的，我一开始没看到，也很抱歉，但几乎无法发布整个 html 代码，感谢大家，尽管我非常感谢您的回复试图提供帮助。
回答by Jérémy Dutheil
Difficult to understand specifically for your context without the HTML, but here is a global idea : you generally don't need to put float: left;for left column, and float: right;for right column, even if it seems logical for you.
在没有 HTML 的情况下，很难专门针对您的上下文来理解，但这里有一个全局性的想法：您通常不需要float: left;为左列和float: right;右列放置，即使这对您来说似乎合乎逻辑。
An easier and more reliable way would be to put allyour elements that will be next to each other on float: left;(so the right column would be floating left, just near the left column)
一种更简单、更可靠的方法是将所有元素放在一起float: left;（因此右列将向左浮动，就在左列附近）
With your image, I would do something like that :
用你的形象，我会做这样的事情：
<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; }
回答by Wrostran
Try to divide the main wrapper into 2 cols like this. (i add a footer incase u need it later)
尝试像这样将主包装器分成 2 个列。（我添加了一个页脚以防你以后需要它）
then just put the other div's inside
然后把另一个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
和 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;
}
回答by zsaat14
Check the margin on both the #left-column and the #slideshow. The width of an element only takes into account border and padding. Your total width is 990px. #left-column is 240px and #slideshow is 720px. 240+720 is 960px. So if you have more than 30px of margin, one of the elements has to move down.
检查 #left-column 和 #slideshow 上的边距。元素的宽度只考虑边框和内边距。您的总宽度为 990 像素。#left-column 为 240px，#slideshow 为 720px。240+720 是 960 像素。因此，如果您的边距超过 30 像素，则其中一个元素必须向下移动。
回答by Godinall
use a minus margin-top for #left-column with the value of your #slidshow height
对 #left-column 使用负边距顶部和 #slidshow 高度的值
回答by Dhaval Marthak
Either set
任一套
vertical-align:top; //to left column `#left-column`
Or
或者
Try reducing #slideshowwidth
尝试减小#slideshow宽度
make sure you are making clear both the floating divs
确保您清楚浮动 divs
