一個簡單的css定位系統。試圖對齊他們完美，甚至

Question

嗨，大家好我很想嘗試做3盒完美對齊，即使對方，但我不知道爲什麼它不斷移動的地方

我有一個.clear類上但它仍然不會甚至成爲和中間的一個出現故障

這是我的HTML和我爲了

 <div id="left3box"> 
     <p> hello i am left 
     </div> 
     <div id="middle3box"> 
     <p> hello i am middle 
     </div> 
     <div id="right3box"> 
     <p> hello i am right 
     </div> 
    <div class="clear"></div>  

CSS 0

和我的CSS

#thirdbox { 
    border: solid 4px black; 
    margin: 60px; 
} 

#left3box{ 
width: 300px; border: 1px solid red; float: left; margin-right: 30px; 
} 

#middle3box{ 
width: 300px; border: 1px solid red; margin: auto; 

} 

#right3box{ 
width: 300px; border: 1px solid red; float: right; margin-right: 30px; 
} 

Answer 1

如果你想在3盒要均分你可能最好去掉「花車」，使他們「dispay：inline-block的」設置父元素爲「文本 - 對齊：中心」，然後使用‘上div的保證金’來決定

您所提供的可以工作，這取決於父容器

Answer 2

的寬度使用保證金的代碼它們之間的間距和彩車中間框應該在標記中的左側和右側之後出現。

Answer 3

爲您的中間列添加一個右側邊距和左側邊距，調整它，使其完全符合您的要求。因此，像

.rightColumn 
{ 
border: 1px solid red; 
width: 300px; 
float: left; 
} 
.leftColumn 
{ 
border: 1px solid red; 
width: 300px; 
float:left; 
color:#7D26CD; 
} 
.middleColumn 
{ 
border: 1px solid red; 
margin-right: 10px; 
margin-left: 10px; 
width: 300px; 
float: left; 
} 

另一個原因，它mightmove outof的地方是，如果保證金的權利，你必須在leftand右邊框太寬，因此沒有足夠的空間用於所有3所以只是擺弄那。