html - CSS 手动设置内联 block 元素的基线并使其达到预期高度

Question

我正在设计海天组件。我想以海平面为基线。

这是正确呈现的尝试。

.out {
   display:inline-block;
   background-color:yellow;
   padding-bottom:30px; 
}

.outer {
   display:inline-block;
   background-color:cyan;
   width:100px;
   height:100px;
   position:relative;
   bottom:-30px ;
}

.inner {
  position:absolute;
  height:30px;
  background-color:blue;
  bottom:0px;
  width:100%;
}

<div class="out">hello<div class="outer"><div class="inner">
</div></div>foobar</div>

这里的技巧是设置一个负底部并使用填充使 .out 底部位于预期位置。这是没有填充的情况。

.out {
   display:inline-block;
   background-color:yellow;
}

.outer {
   display:inline-block;
   background-color:cyan;
   width:100px;
   height:100px;
   position:relative;
   bottom:-30px ;
}

.inner {
  position:absolute;
  height:30px;
  background-color:blue;
  bottom:0px;
  width:100%;
}

<div class="out">hello<div class="outer"><div class="inner">
</div></div>foobar</div>

但是，使用多个这样的组件需要将填充设置为最后一行所有组件底部的最大值。这是不可行的。

有没有办法不用 padding-bottom 呢？

Answer 1

问题是您使用了 bottom: -30px。是的，将大海与文本对齐，但破坏了布局。

相反，您应该利用 inline-blocks having a very interesting baseline :

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

也就是说，你只需要用一些流入的内容来填充天空部分。由于海洋部分已经流出，因此不会影响基线。因此，您可以插入一个伪元素 .outer ，它占用 .inner 剩余的高度:

.outer::before {
  content: '';
  display: inline-block;
  height: calc(100% - 30px);
}

.out {
  display: inline-block;
  background-color: yellow;
}
.outer {
  display: inline-block;
  background-color: cyan;
  width: 100px;
  height: 100px;
  position: relative;
}
.outer::before {
  content: '';
  display: inline-block;
  height: calc(100% - 30px);
}
.inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background-color: blue;
}

<div class="out">
  hello
  <div class="outer">
    <div class="inner"></div>
  </div>
  foobar
</div>

为了避免 calc(100% - 30px) 你也可以使用 flexbox:

.outer {
  display: inline-flex;
  flex-direction: column;
}
.outer::before {
  flex: 1;
}

.out {
  display: inline-block;
  background-color: yellow;
}
.outer {
  display: inline-flex;
  flex-direction: column;
  background-color: cyan;
  width: 100px;
  height: 100px;
}
.outer::before {
  content: '';
  flex: 1;
}
.inner {
  height: 30px;
  background-color: blue;
}

<div class="out">
  hello
  <div class="outer">
    <div class="inner"></div>
  </div>
  foobar
</div>

但我认为 CSS WG 还没有完全决定正交流中的基线应该如何表现，所以我现在推荐 calc(100% - 30px)。