Question

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

<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'元素都将在外部div中内嵌，高度为100px。我无法弄清楚为什么'p'元素显示在父div下面。 vertical-align没有影响，也没有将'height'切换为'line-height'。谁能解释一下这里发生了什么？

谢谢！

Answer 1

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

Answer 2

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

查看here：这是您当前的布局。

然后here：这是没有空格的布局，注意区别？

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

现在针对<p>问题：默认情况下，vertical-align设置为baseline，这意味着段落元素的基线将与其父元素的基线对齐。给它样式vertical-align:top来解决这个问题。

HTML内联块布局

2 个答案: