爲什麼我的div區塊會在內部有內容時移動？

.role_wrapper1,.role_wrapper2 { 
 
    display:inline-block; 
 
} 
 

 

 
.role_wrapper1 { 
 
    width:200px; 
 
    height:230px; 
 
    border: 2px solid rgba(204, 204, 204, 0.2); 
 
    border-radius: 10px; 
 
    margin-right:6px; 
 
} 
 

 
.role_wrapper2 { 
 
    width:200px; 
 
    height:230px; 
 
    margin-right:10px; 
 
    background-color: #f8f8f8; 
 
    border-radius: 10px; 
 
}

<div class="role_wrapper1">1</div> 
 
<div class="role_wrapper2"></div>

沒有內部DIV1的任何內容，這兩個將正確顯示。但是，當我在div1中放入一些內容時，div2將會移位。

我錯過了什麼嗎？

來源

2015-07-22 Dreams

可能重複http://stackoverflow.com/questions/31417976/css-display- inline-block-text-inside-issue） – potashin

Thanks.I使用vertical-align：top來解決這個問題。對不起，重複。 – Dreams

您已經丟失：float:left

.role_wrapper1,.role_wrapper2 { 
 
    display:inline-block; 
 
} 
 

 

 
.role_wrapper1 { 
 
    width:200px; 
 
    height:230px; 
 
    border: 2px solid rgba(204, 204, 204, 0.2); 
 
    border-radius: 10px; 
 
    margin-right:6px; 
 
    float:left 
 
} 
 

 
.role_wrapper2 { 
 
    width:200px; 
 
    height:230px; 
 
    margin-right:10px; 
 
    background-color: #f8f8f8; 
 
    border-radius: 10px; 
 
}

<div class="role_wrapper1">1hjghjjgj</div> 
 
<div class="role_wrapper2"></div>

[內部問題CSS顯示內嵌塊文本（的

來源

2015-07-22 07:32:19

爲什麼我的div區塊會在內部有內容時移動？

回答

相關問題