如何将两个div彼此相邻

Question

我写了下面的HTML试图将两个div放在彼此旁边.

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

但是,我写的代码会导致两个div一直向左浮动.这样做的正确方法是将两个div并排浮动.

我需要改变什么才能将两个div并排？

Answer 1

而不是使用float: left,使用display: inline-block:

<div id='wrapper' style='text-align: center;'>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet,<br />
        consectetur adipisicing elit
    </div>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
</div>

每个内部的顶部div通过使用保持对齐vertical-align: top.

示例:http://jsfiddle.net/hCV8f/1/

Answer 2

您必须自动设置保证金,并可能是您的包装div的特定宽度

<div id="wrapper"></div>

在你的CSS中:

#wrapper {
    width: 70%;
    margin: 0 auto;
}

Answer 3

试试这个:

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;background-color:red;width:50%'>
        Lorem ipsum<br />dolor sit amet
    </div>
    <div style='float:right;background-color:blue;width:50%'>
         Lorem ipsum<br />dolor sit amet
    </div>
</div>

http://jsfiddle.net/JDAyt/