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

Question

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

我想要显示两个<div>并排的宽度和高度的元素.我申请inline-block了<div>s,但左边元素的位置很奇怪:

垂直错位

HTML:

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

Run Code Online (Sandbox Code Playgroud)

CSS:

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

Run Code Online (Sandbox Code Playgroud)

两个元素之间的唯一区别是overflow: hidden选项.当我申请overflow: hidden时#myDivTag,它正常工作,但我不知道为什么.我认为这与overflow房产无关.但我的想法显然是错误的.为什么？

Answer 1

use*_*069 7

默认情况下,一行中的内联框由其基线垂直对齐(因为vertical-align属性的默认值为baseline),并且内联块的基线取决于overflow属性的值.如果overflow内联块上的属性值为visible,则此内联块的基线是其最后一行的基线,但如果溢出属性具有另一个值(例如hidden),则其基线是底部边距边缘.

文件说

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

我还建议你阅读这篇伟大的文章,以便完全理解内联内容的垂直对齐.

归档时间：	10 年，4 月前
查看次数：	128 次
最近记录：	10 年，4 月前