靠谱前端培训|上海web前端培训机构-百读易莱胜官网 靠谱前端培训.png

靠谱前端培训.png
【上海校区】 专攻小班JS前端培训
当前位置:  主页 > web前端文章 > css >

CSS内联块和基线对齐

2019-02-18/10:02:20

CSS - 内联块和基线对齐当我们使用display:inline-block元素相邻放置时,默认情况下它们的基线与父基线对齐,除非vertical-align这些元素的属性被设置为非baseline。 以下是关于基线对齐如何工作的一些示例。


内联块基线对齐的基本示例

div元素的基线是正常流程中最后一行的基线。这里两个div根据最后的文本行进行对齐。


.outer > * {
  display:inline-block;
  background-color:lightgreen;
  }
  .one {width:80px; height:80px;}
  .two {width:80px; height:80px;}
    hello    Some text that will wrap

内联块基线对齐 - 空div

在div为空的情况下,其基线是底部边缘边缘。这里第一个div的最后一行文本与第二个div的底部边缘边缘对齐(因为它是空的)。


.outer > * {
    display:inline-block;
    background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
    hello

   内联块基线对齐 - 带溢出的div

如果div的溢出不是可见的(例如滚动,隐藏),则其基线是底部边缘边缘。这里的第一个div的最后一行文本与第二个div的底部边缘边缘对齐(因为它有overflow:scroll)。

.outer > * {
    display:inline-block;
    background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px; overflow:scroll;}
    hello    hello