css,css基线对齐
您的位置: 主页 > web前端文章 > css >

CSS内联块和基线对齐【访问量:139】

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


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

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

inline-block-baseline-example-div-having-text.png

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

内联块基线对齐 - 空div

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

inline-block-baseline-example-empty-div.png

.outer > * {
    display:inline-block;
    background-color:lightgreen;
}
.one {width:80px; height:80px;}
.two {width:80px; height:80px;}
<div class="outer">
    <div class="one">hello</div>
    <div class="two"></div>
</div>

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

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

inline-block-baseline-examplediv-having-overflow-scroll.png

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


2018-04-04
匿名评论