Question

我希望所有三个盒子都处于同一级别，你会看到盒子2在盒子1和盒子2下面是如何因为它的内容比其他盒子少，但是必须有一些样式我我错过了将每个div显示在同一级别（从视觉上讲），无论其内容如何。

CSS

.container {
    width: 470px;
    border:1px solid purple;
    height: 210px;
}

.box {
    width: 150px;
    height: 200px;
    border:1px solid red;
    display:inline-block;
}

HTML

<div class="container">
    <div class="box">
        <h1>Box 1</h1>
        <p>Content</p>
        <p>Content</p>
    </div>

    <div class="box">
        <h1>Box 2</h1>
    </div>    
    <div class="box">
        <h1>Box 3</h1>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>

Answer 1

在样式表中应用样式vertical-align:top to .box

Answer 2

使它们显示为table-cell也会自动适合它们的高度和位置：

http://jsfiddle.net/519xzvou/2/

.box {
    width: 150px;
    height: 200px;
    border:1px solid red;
    display:table-cell;
}

Answer 3

您可以在父类中使用CSS 3属性显示：-webkit盒; -webkit-box-orient：horizontal;

[的jsfiddle] [1]

[1]: http://jsfiddle.net/519xzvou/4/

内联块div具有固定的高度和宽度，不均匀

3 个答案: