我无法理解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'.谁能解释一下这里发生了什么？
谢谢!
没有vertical-align指定的元素(例如 p)与...对齐baseline.如果设置 p为vertical-align:top将其与其父级的顶部对齐(从而与示例中的其他元素对齐).