css - 三个 div 未正确对齐

Question

我在垂直对齐div时遇到问题，应该是什么问题？

这是我的html代码

 <div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>

css

.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
} 
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
 }
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;    
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}

我希望三个 div 在父级内部垂直对齐，这是演示

Answer 1

我不确定为什么你需要这么多冗余代码来实现你所描述的，只需执行以下操作：

.recentProfiles
{
    width:300px;
    border:2px dotted green;
    margin-left:20px;
    margin-top:10px;
}

.profiles
{
    width:300px;
    height:190px;
    border:2px dotted black;
}

演示：http: //jsfiddle.net/VvqXF/

Answer 2

尝试float:left在class配置文件上使用，然后margin在 profile1、profile2、profile3 上不使用

工作示例：http: //jsfiddle.net/rK38V/

Answer 3

让所有框向左浮动 ( float: left) 并删除所有边距属性，如下所示：http: //jsfiddle.net/2ABmU/

Answer 4

你对浮动的想法是错误的。这是新代码：http ://cdpn.io/AvJqI

HTML

  <div class="recentProfiles">

    <div class="profiles" id="profile1">
    </div>
    <div class="profiles" id="profile2">
    </div>
    <div class="profiles" id="profile3">
    </div>
    <div class="floatClear"></div>
 </div>

CSS

.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;

}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;

}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;

}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;

}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}

.floatClear {
  clear: both;
}

Answer 5

那是因为你的利润。如果您clear:both起飞profile1然后添加float: left到所有配置文件中，则取消这些边距。

演示：http: //jsfiddle.net/WC5gT/