使 2 个 div 并排浮动的 CSS 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4882206/
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
CSS Problem to make 2 divs float side by side
提问by Paul
I would like 2 divs, which are within a container div, to appear side-by-side. However the second one wraps for some reason. The 2nd div promo is below and to the right the 1st div slideshow. The margin seems correct, but I want these two divs to appear side-by-side.
我希望容器 div 中的 2 个 div 并排显示。然而，由于某种原因，第二个包装。第二个 div 宣传片位于第一个 div 幻灯片的下方和右侧。边距似乎是正确的，但我希望这两个 div 并排出现。
I've tried some of the suggestions on here but they do not work.
我已经尝试了这里的一些建议，但它们不起作用。
Here is the CSS:
这是CSS：
#top-feature {
background: red;
height: 320px;
width: 897px;
margin: 11px 0 0 0;
/*padding: 10px 0 0 10px;*/
position: relative;
text-align: left;
}
#slideshow {
height: 300px;
width: 548px;
margin: 0 0 0 0;
background: blue;
}
#promo {
height: 100px;
width: 200px;
margin: 0 0 0 569px;
background: green;
}
Here is the HTML:
这是 HTML：
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="top-feature">
<div id="slideshow">
</div>
<div id="promo">
</div>
</div>
</asp:Content>
采纳答案by SpliFF
You need to float, inline or position:absolute those inner divs if you want them side-by-side. A "normal" div is a block object which forces following content to appear below it.
如果您希望它们并排放置，则需要浮动、内联或定位：绝对这些内部 div。“普通” div 是一个块对象，它强制后面的内容出现在它的下方。
回答by Petah
Use the floatcss property
使用floatcss 属性
#top-feature {
background: red;
height: 320px;
width: 897px;
}
#top-feature div {
float: left;
}
#slideshow {
height: 300px;
width: 548px;
background: blue;
}
#promo {
background: green;
height: 100px;
width: 200px;
}
回答by BMitch
first be sure to float, or you could also use absolute positions:
首先确保浮动，或者您也可以使用绝对位置：
#slideshow {
height: 300px;
width: 548px;
margin: 0 0 0 0;
background: blue;
float: left;
}
#promo {
height: 100px;
width: 200px;
margin: 0 0 0 569px;
background: green;
float: left;
}
Then make sure you have some contents in each div.
然后确保每个 div 中有一些内容。
回答by RohitG
Actually you don't need any special styling to achieve that, it is by default property of css.
实际上你不需要任何特殊的样式来实现这一点，它是 css 的默认属性。
The two divs will always be side by side until the total width of the two divs is not more than the container div or you have explicitly used clear:both; with the first div. Here is an example :
两个 div 将始终并排，直到两个 div 的总宽度不超过容器 div 或您明确使用了 clear:both; 与第一个 div。这是一个例子：
#outerdiv {
width:500px;
height:300px;
}
#innerdiv1 {
width:200px;
height:300px;
float:left;
}
#innerdiv2 {
width:300px;
height:300px;
}
If you haven't specify any borders, these will be displayed side by side, but if you have specified borders/padding/margins etc. you have to then adjust the width of inner divs accordingly.
如果您没有指定任何边框，这些将并排显示，但如果您指定了边框/填充/边距等，则必须相应地调整内部 div 的宽度。
