div对齐问题

Question

我有2个div嵌套在一个较大的div中，

<div id="site-wrapper">
   <div id="user1"></div>
   <div id="user2"></div>
<div>

CSS是

#site-wrapper{
    border: 1px solid;
width: 800px;
min-height: 600px;
margin-left: auto;
margin-right: auto;
}
#user1{
border: 1px solid;
width: 200px;
min-height: 100px;
 }  
#user2{
border: 1px solid;
width: 200px;
min-height: 100px;
}

它们出现在另一个之下。 我如何使它们彼此在同一水平上。

Answer 1

由于默认情况下DIV是块元素，因此您需要对其进行“浮动”以使其水平排列。 我已将花车添加到以下两个div中的每个div中：

#site-wrapper{
    border: 1px solid;
width: 800px;
min-height: 600px;
margin-left: auto;
margin-right: auto;
}
#user1{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
 }  
#user2{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
}

Answer 2

浮动#user1和#user2 。

jsFiddle 。

Answer 3

添加以下内容将起作用：

#site-wrapper div {
    float : left;
}

请记住，浮动元素的宽度是固定的-这很重要，因为如果您未明确定义浮动元素的宽度，则可能会得到意想不到的结果。

要了解有关视觉格式元素行为的更多信息，请参见此处 。

Answer 4

尝试添加float属性。

user1
{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
}  
user2{
border: 1px solid;
width: 200px;
min-height: 100px;
float:left;
}

Answer 5

添加float：left; 到＃user1的CSS

或者，您可以在两个用户div上添加display：inline，但是将来很有可能需要在其中一个或两个上都使用display：block，因此必须重新使用float。