html - CSS 显示：inline-block | 3 列 | 没有花车

Question

我正在尝试获得 3 列设计，而不使用任何浮点数。

HTML

<header>This is a Header</header>
<div id="body">
    <div id="col-1" class="col">this is a column - this is a column - this is a column - this is a column</div>
    <div id="col-2" class="col">this is a column - this is a column - this is a column - this is a column</div>
    <div id="col-3" class="col">this is a column - this is a column - this is a column - this is a column</div>
</div>

CSS

    * {
        margin:0;
        padding:0;
    }
    header {
        background:#4679BD;
        width:90%;
        height:70px;
        line-height:70px;
        font-size:20px;
        text-align:center;
        border:1px solid #333;
        margin:10px auto;
    }
    #body {
        width:700px;
        margin:auto;
        border:1px solid #333;
    }
    #body .col {
        display:inline-block;
        background:#ccc;
        height:500px;
        border:1px solid #333;
        margin:5px;
    }
    #body #col-1 {
        width:100px;
    }
    #body #col-2 {
        width:200px;
    }
    #body #col-3 {


   width:350px;
}

http://jsfiddle.net/chaos67731/fmZpr/5/

当我在类“.col”上给列一个宽度时，所有列都停留在顶部，但是当我通过 ID 给每一列一个宽度并使它们不同时，它们会按照您在上面的链接中看到的那样进行操作。

对此有什么解决方法，为什么会发生？

Answer 1

默认情况下，inline-block元素的垂直对齐方式是baseline.

只需设置vertical-align:top在.col.

#body .col {
    vertical-align: top;
}

在这里工作 jsFiddle

Answer 2

用这个

{
    vertical-align: top;
}