Question

我希望在容器div中的2个div并排显示。然而，第二个由于某种原因包装。第二个div促销位于第一个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>

Answer 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/

Answer 2

你需要浮动，内联或定位：绝对那些内部div如果你想要它们并排。 “普通”div是一个块对象，它强制下面的内容出现在它下面。

Answer 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都有一些内容。

Answer 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的宽度。

CSS让2个div并排浮动的问题

4 个答案: