2

我在垂直对齐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 在父级内部垂直对齐,这是演示

4

5 回答 5

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/

于 2013-03-27T10:12:27.220 回答
0

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

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

于 2013-03-27T10:09:22.663 回答
0

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

于 2013-03-27T10:09:57.490 回答
0

你对浮动的想法是错误的。这是新代码: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;
}
于 2013-03-27T10:09:57.783 回答
0

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

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

于 2013-03-27T10:10:10.793 回答