html - 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 是 block 元素，因此您需要“ float ”它们以允许它们水平排列。我已经将 float 添加到下面的两个 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;
}