css - 内联 block 不在同一行

Question

我有一个很奇怪的问题。当我遇到对齐问题时，我实际上正在创建一个 JSFiddle 来回答另一个问题。仅创建两个行内 block 元素会导致非常奇怪的情况，即左侧 block 被向下推大约 40 像素。

我知道这在 Chrome 和 Firefox 中都是一个问题(在 Mac 上，Windows 不确定)。

自己看看:JSFiddle

我只有两个自定义元素，我称之为 <cell>包含标题，保存在 <t> 中和 <cnt> 中的 lipsum 段落.

---

HTML:

<div align="center">
<cell>
    <t>This is a short title</t>
    <cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>

<cell>
    <t>This is a very very very very very very very chocolate very very very very very very long title</t>
    <cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
</div>

---

CSS:

cell
{
    display: inline-block;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
}

---

结果:

Answer 1

您需要指定 vertical-align property (例如 vertical-align:top;)因为默认值为基线(如果是 fiddle 和图像，您可以看到它)。

cell {
    display: inline-block;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
    vertical-align:top;
}

jsFiddle example