CSS手动设置内联块元素的基线，并使其达到预期的高度 [英] CSS set baseline of inline-block element manually and have it take the expected height

问题描述

我正在设计海天组件.我想以海平面为基准.

I'm designing a sea-sky component. I'd like to have it's baseline at sea-level.

这是正确呈现的尝试.

.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底位于期望的位置.这是没有填充的情况.

The trick here is to set a negative bottom and use a padding to have the .out bottom at the expected position. Here's what happens without the padding.

.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>

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

However, using multiple such component would require setting the padding to the max of all the bottom of the components which are on the last line. This is not feasible.

有没有一种方法可以解决?

Is there a way to do without the padding-bottom ?

推荐答案

问题是您使用的是 bottom:-30px .是的，使文本与海洋对齐，但会破坏布局.

The problem is that you use bottom: -30px. Yes, aligns the sea with the text, but breaks the layout.

相反，您应该利用具有非常有趣的基线:

内联代码块"的基线是其最后一个行框的基线正常流量中，除非它没有流入管线盒或其溢出"属性的计算值不是可见"，在这种情况下，基线是底部边缘.

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 剩余的剩余高度:

That is, you only need to fill the sky part with some in-flow content. Since the sea part is already out-of-flow, it won't affect the baseline. Therefore, you can insert a pseudo-element is .outer which takes the remaining height left by .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:

To avoid that calc(100% - 30px) you can also use 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).

But I think the CSS WG hasn't completely decided how baselines in orthogonal flows should behave, so I would recommend calc(100% - 30px) for now.

这篇关于CSS手动设置内联块元素的基线，并使其达到预期的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！