Question

所以我做了四个简单的div，我将改变标题div的属性。

HTML：

   <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        <div class="header">Lorem Ipsum</div>
    </div>

CSS：

.third {
    width:500px;
    display:inline-block;
    border-right:1px solid black;
    height:400px;
}
.header {
    margin-left:16%;
    font-family:Arial;
    font-size:200%;
}

第三个div工作得很好但前两个div由于文本较大而被推下来。我该怎么做才能防止这个问题？

Answer 1

添加vertical-align: top将解决您的问题。

小提琴：http://jsfiddle.net/QX7FH/

如果你很好奇为什么会这样，那么andyb在这里解释原因很好：Why does this inline-block element have content that is not vertically aligned

Answer 2

你可以使用浮点数而不是内联块，你也可以获得一些浏览器支持（旧的即时）：

http://jsfiddle.net/aP9Fu/

.third {
    width:500px;
    display:block;
    border-right:1px solid black;
    height:400px;
    float: left;
}

另外，我在所有这些div周围添加了一个容器，以清除浮动。

Answer 3

div自动设置为块元素。这意味着它们将创建换行符。如果您还在display:inline-block;的css中添加.header，则应阻止其创建新行。

为什么更大的文字向左推送内容？

3 个答案: