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

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;}