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中的每一个：

#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;
}

保持在我的浮动元素具有固定的宽度 - 这很重要，因为如果没有明确定义浮动元素的宽度，可能会得到意想不到的结果。

要阅读有关可视化格式元素行为的更多信息，请参阅here。

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

添加浮动：左;到＃user1

的CSS

或者，您可以将display：inline添加到两个用户div中，但很可能在将来您需要显示：阻止其中一个或两个，因此您必须返回到漂浮。

div对齐问题

5 个答案: