力的失去自己的位置...

Question

我的HTML：

<ul class="down_rectangles"> 
    <li >  
    <div class="keimeno"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
     consequat tellus consectetur adipiscing elit. Donec 
     </div> 

    </li> 
    <li > 
    <div class="keimeno"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis 
     consequat tellus 
     </div> 

    </li> 
</ul> 

CSS如下：

.down_rectangles{ 
list-style: none; 
margin-top:0px; 
padding:0; 
} 
.down_rectangles li { 
height: 250px; 
width: 265px; 
background-color: #FFF; 
display: inline-block; 
margin-right:15px; 
} 
.down_rectangles>li:last-child { 
margin-right:0;    
} 
.keimeno{ 
color: #626262; 
font-size: 12px; 
margin: 20px; 
line-height: 1.5em; 
font-family: Verdana, Geneva, sans-serif; 
} 

如果裏面的二里的文字是一樣的，他們站在旁邊，彼此不錯。每次我試圖改變第一個裏面的文本時，第二個裏面正在往下移動並失去它的初始位置。爲什麼會發生？ 非常感謝您

Answer 1

您需要設置一個vertical-align:top您li元素，因爲它們是inline-blocks

例如在codepen：http://codepen.io/anon/pen/vhJpG

Answer 2

因爲使用display: inline-block;元素被對齊baseline默認

所以你需要使用vertical-align: top;爲.down_rectangles

.down_rectangles li { 
    height: 250px; 
    width: 265px; 
    background-color: #FFF; 
    display: inline-block; 
    margin-right:15px; 
    vertical-align: top; 
} 

Demo

Demo 2（設置基線如果不使用vertical-align: top;）

Answer 3

嘗試這個

.down_rectangles li{float :left;}