Question

我想要显示两个并排有宽度和高度的<div>元素。我将inline-block应用于<div>，但左侧元素的位置很奇怪：

vertical misalignment

HTML：

<body>
    <div id="myDivTag">content</div>
    <div id="map-canvas">for google map API</div>
</body>

CSS：

#myDivTag, #map-canvas {
    display: inline-block;
    height: 95%;
    width: 49%;
    z-index: 0;
}

两个元素之间的唯一区别是overflow: hidden选项。当我将overflow: hidden应用于#myDivTag时，它会正常工作，但我不知道为什么。我认为它与overflow属性无关。但我的想法显然是错误的。为什么呢？

Answer 1

默认情况下，行中的内联框由其基线垂直对齐（因为vertical-align属性的默认值为baseline），并且内联块的基线取决于{的值{1}}财产。如果内联块中overflow属性的值为overflow，则此内联块的基线是其最后一行的基线，但如果overflow属性具有另一个值（例如visible），然后它的基线是下边距边缘。

The documentation says

“内联块”的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其“溢出”属性的计算值不是“可见” '，在这种情况下，基线是底部边缘边缘。

我还建议你阅读this great article，以便完全理解内联内容的垂直对齐方式。

Answer 2

为你的css添加vertical-align，它应该可以工作：

#myDivTag, #map-canvas {
    display: inline-block;
    vertical-align:top;
    height: 95%;
    width: 49%;
    z-index: 0;
}

为什么在溢出时内联块的工作方式不同：应用了隐藏？

2 个答案: