Question

我正在设计一个海天组件。我希望在海平面拥有它的基线。

这是一次正确渲染的尝试。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

有没有办法没有填充底部？

Answer 1

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

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

'内联块'的基线是其最后一个线框的基线在正常流程中，除非它没有流入线框或如果它的'overflow'属性有一个除'visible'以外的计算值在哪种情况下，基线是底部边缘边缘。

也就是说，您只需要在天空部分填充一些流入内容。由于海洋部分已经不在流动状态，因此不会影响基线。因此，您可以插入一个伪元素.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)。

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

1 个答案: