三個div不正確對齊

我在對齊div的垂直時遇到問題，應該有什麼問題？三個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

來源

2013-03-27 YoYo

的http：// codepen.io/anon/pen/irfJL – Damonsson 2013-03-27 10:12:43

你真的是指垂直嗎？你的例子看起來更像你的意思*水平*。 – nkr 2013-03-27 11:07:37

對不起其橫向 – YoYo 2013-03-27 11:59:17

那是因爲你的利潤率。如果您取消clear:both關閉profile1，然後將float: left添加到所有配置文件，然後取下這些邊距。

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

來源

2013-03-27 10:10:10 mattytommo

例如不工作 – Jacob 2013-03-27 10:53:08

@Jacob看來有人已經更新了這個codepen。將它移到小提琴上。 – mattytommo 2013-03-27 10:54:34

嘗試使用float:left上class配置文件，然後在profile1，profile2，profile3上沒有margin

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

來源

2013-03-27 10:09:22 Jacob

擁有所有的箱子左浮動（float: left），並刪除所有邊距屬性，像這樣：http://jsfiddle.net/2ABmU/

來源

2013-03-27 10:09:57

你得到浮動錯誤的想法。下面是新的代碼：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-27 10:09:57

我不知道你爲什麼需要那麼多的冗餘代碼，即可實現像你描述什麼，只是做：

.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-27 10:12:27 Eli

三個div不正確對齊

回答

相關問題