css - 为什么 inline-block display div 的内容在下一行，如何停止？

Question

我尝试使用带有图像和一些文本的 display:inline-block，但文本位于图像之后的下一行。请看http://jsfiddle.net/skwnb5vq/2/ .你能帮我解决这个问题吗？

<div class="user">
    <div class="user-img">
        <img src="..."></img>           
    </div>
    <div class="user-name">     
        <span>Lorem </span>
    </div>
</div>

div.user{
    display: inline-block;
    width: 25%;
    margin: 5px 1% 5px 1%;
    background-color: yellow;
}
div.user-img{
    width: 30%;
}
div.user img {
    max-width: 100%;
}
div.user-name {
    width: 70%;
    font-size: 1em; 
    color: white;
    font-weight: bold;
    background-color: rgb(0,121,191);

}

Answer 1

因为 block 级元素占据了整个页面的宽度，即使你缩小它的宽度也是如此。如果将图像向左浮动，您会看到它已从正常流中移除并按照您的意愿运行。这是 "normal flow"这会阻止您的文本出现在您想要的位置。