CSS问题，使2 divs并排 [英] CSS Problem to make 2 divs float side by side

问题描述

我想要2个div，它们在一个容器div内，并排显示。然而第二个包裹由于某种原因。第二个促销是在下面和右边的第一个div幻灯片。边距看起来是正确的，但我想让这两个div并排显示。

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.

我已经尝试过这里的一些建议，但他们不工作。

I've tried some of the suggestions on here but they do not work.

这里是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>

推荐答案

您需要浮动，内联或位置：内部div，如果你想他们并排。 正常div是一个块对象，强制以下内容出现在其下面。

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.

这篇关于CSS问题，使2 divs并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！