0

我无法理解 HTML 中的内联、内联块和块显示选项之间的区别。尤其是 inline-block 如何适合。块项目似乎总是出现在自己的行上。内联项目似乎不能很好地处理宽度和高度设置。Inline-block 似乎是两者之间的混合，但会导致一些古怪的布局情况。这是一个例子：

<style type="text/css">
#container {
    height: 100px;
    background: tan;
}

#container p {
    height: 100px;
    background: yellow;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: 29%;
    display: inline-block;
}

#container div:first-child {
    height: 100px;
    display: inline-block;
    width: 35%;
    padding: 0px;
    margin: 0px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
}

#container div:last-child {
    height: 100px;
    display: inline-block;
    width: 35%;
    padding: 0px;
    margin: 0px;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
}
</style>
<body>
    <div id="container">
        <div class="decorator"></div>
        <p>A very long test paragraph like</p>
        <div class="decorator"></div>
    </div>
</body>

我的期望是“p”元素和两个“div”元素都将在高度为 100px 的外部 div 内内联。我无法弄清楚为什么“p”元素显示在父 div 下方。垂直对齐没有影响，将“高度”切换为“行高”也没有影响。谁能解释这里发生了什么？

谢谢！

4

2 回答 2

5

未指定的元素vertical-align（例如 p）与baseline. 如果您设置 它p，vertical-align:top它将与其父级的顶部对齐（从而与您的示例中的其他元素对齐）。

于 2012-11-26T15:07:18.273 回答
1

首先，您已将其用作inline显示器。这意味着将考虑空格。

看这里：这是您当前的布局。

然后在这里：这是你没有空格的布局，注意区别吗？

由于这个空白，在某些情况下你的布局很可能会被扭曲。

现在解决<p>问题：默认情况下，vertical-align设置为baseline表示段落元素的基线将与其父元素的基线对齐。给它一种风格vertical-align:top来解决这个问题。

于 2012-11-26T15:19:50.487 回答