格对齐问题

我有嵌套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; 
}

他们正在出现一个低于其他。我如何让他们在对方的同一层面上。

来源

2011-04-27 user544079

浮动#user1和#user2。

jsFiddle。

来源

2011-04-27 01:41:17 alex

由于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; 
}

来源

2011-04-27 01:41:03 BraedenP

我的答案 – user544079 2011-04-27 01:43:49

@user你为什么问这个问题呢？：P – alex 2011-04-27 01:50:06

我想知道同样的事情大声笑。除非他的意思是“这正是我正在寻找的答案。” – BraedenP 2011-04-27 01:50:54

尝试添加浮动属性。

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

来源

2011-04-27 01:42:05 cgatian

尝试使用* code format *按钮：P – alex 2011-04-27 01:50:26

添加float：left;到CSS的＃user1

或者，您可以将display：inline添加到两个用户div，但很可能在将来您需要在其中一个或两个上显示：block，然后您我必须诉诸浮动。

来源

2011-04-27 01:42:07

如果将它们设置为内联，它们将丢失所有填充并看起来像是一个DIV行的块：P – BraedenP 2011-04-27 01:43:19

添加以下将工作：

#site-wrapper div { 
    float : left; 
}

请您矿井浮动元素有固定的宽度 - 这很重要，因为你可能会得到意外的结果，如果你不明确定义浮动元素的宽度。

要详细了解可视格式化元素的行为，请参阅here。

来源

2011-04-27 01:42:35 jlmakes

回答

相关问题