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在父级内部垂直对齐，这里是demo

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，然后在个人资料1，个人资料2，个人资料3

上使用margin

工作示例：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/

三个div未正确对齐

5 个答案: