使 2 个 div 并排浮动的 CSS 问题答案

【问题标题】：CSS Problem to make 2 divs float side by side使 2 个 div 并排浮动的 CSS 问题
【发布时间】：2013-11-21 16:33:17
【问题描述】：

我希望一个容器 div 中的 2 个 div 并排显示。然而，第二个包装由于某种原因。第 2 个 div 促销位于第 1 个 div 幻灯片的下方和右侧。边距似乎是正确的，但我希望这两个 div 并排显示。

我已经尝试了这里的一些建议，但它们不起作用。

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

这是 HTML：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="top-feature">
        <div id="slideshow">
        </div>
        <div id="promo">
        </div>
    </div>
</asp:Content>

【问题讨论】：

标签： css

【解决方案1】：

使用float css 属性

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

见：http://www.jsfiddle.net/K64vZ/

【讨论】：

我尝试了似乎可行的方法，但我如何也可以使用边距？
是的，这是一个非常酷的网站。好的，所以我解决了 position: absolute，能够使用边距，而不是使用浮动。
@Paul，使用浮点数有什么问题？您仍然可以设置边距。见：jsfiddle.net/K64vZ/1
我对 Float 不够熟悉。看来绝对没有问题，哪个应该在主流浏览器中工作正确？

【解决方案2】：

如果你想让它们并排，你需要浮动、内联或定位：绝对这些内部 div。 “正常” div 是一个块对象，它强制以下内容出现在其下方。

【讨论】：

我试过这样做，但没有奏效。幻灯片向左浮动，促销向右浮动。
但是您是否先删除了促销上的 569px 边距？
所以我不能在 Float 中使用边距？ Petah 的解决方案似乎有效，但我认为我也需要使用边距。
position: absolute 似乎有效，我可以使用不浮动的边距
确保您可以使用边距，但如果没有绝对定位，边距相对于左侧内部 div 的右边缘。因此 569px 的左边距不适合可用空间，所以它会换行。

【解决方案3】：

首先一定要浮动，或者你也可以使用绝对位置：

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

然后确保每个 div 中都有一些内容。

【讨论】：

【解决方案4】：

实际上你不需要任何特殊的样式来实现它，它是css的默认属性。

两个 div 将始终并排，直到两个 div 的总宽度不超过容器 div 或您已明确使用 clear:both;与第一个 div。这是一个例子：

#outerdiv {
    width:500px;
    height:300px;
}
#innerdiv1 {
    width:200px;
    height:300px;
    float:left;
}
#innerdiv2 {
    width:300px;
    height:300px;
}

如果您没有指定任何边框，它们将并排显示，但如果您指定了边框/填充/边距等，则必须相应地调整内部 div 的宽度。

【讨论】：