垂直叠加元素基线

Question

我有一个垂直叠加元素的容器。

<div>
  <div>line 1</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>line 4</div>
</div>

我希望容器的基线与它的元素之一的基线相同，比如说第三个元素。它应该是这样的：

​

​

我怎样才能用CSS做到这一点呢？

作为一个相关的问题，这类垂直叠加元素容器的基线通常是如何定义的？

我想给这个容器一个属性display: inline-block。这个容器出现在一条线上的其他元素旁边，我希望它们按照基线对齐。

Answer 1

这使得容器的基线与第三个子div的基线一致。

.container > div:nth-of-type(3) ~ div {
  float: left;
  clear: both;
}

示例：

​

.container {
  display: inline-block;
  background: yellow;
  padding: 0 0.5em;
  width: 8em;
}

.b1 > div:nth-of-type(1) ~ div {
  float: left;
  clear: both;
}

.b2 > div:nth-of-type(2) ~ div {
  float: left;
  clear: both;
}

.b3 > div:nth-of-type(3) ~ div {
  float: left;
  clear: both;
}

.b4 > div:nth-of-type(4) ~ div {
  float: left;
  clear: both;
}

.container > div:nth-of-type(1) {
  font-size: 14px;
}

.container > div:nth-of-type(2) {
  font-size: 16px;
}

.container > div:nth-of-type(3) {
  font-size: 24px;
}

.container > div:nth-of-type(4) {
  font-size: 20px;
}

<div class="container b1">
  <div>baseline</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>line 4</div>
</div>
<div class="container">
  Lorem ipsum dolor sit amet
</div>
<div class="container">
  consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
<hr>
<div class="container b2">
  <div>line 1</div>
  <div>baseline</div>
  <div>line 3</div>
  <div>line 4</div>
</div>
<div class="container">
  Lorem ipsum dolor sit amet
</div>
<div class="container">
  consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
<hr>
<div class="container b3">
  <div>line 1</div>
  <div>line 2</div>
  <div>baseline</div>
  <div>line 4</div>
</div>
<div class="container">
  Lorem ipsum dolor sit amet
</div>
<div class="container">
  consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>

<hr>
<div class="container b4">
  <div>line 1</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>baseline</div>
</div>
<div class="container">
  Lorem ipsum dolor sit amet
</div>
<div class="container">
  consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>

​

Answer 2

如果我正确理解你的问题，这样的事情可能会奏效：

​

body {
  line-height: 18px; /* set a line height and use it to calculate the offsets later */
}
div {
  position: relative;
  display: inline-block;
  vertical-align: baseline;

  background: black;
  color: white;   
}

div > div {
  display: block;
}

div.align-1 > div:nth-child(2) {
  position: absolute;
  bottom: -18px; /* 1 x line-height of parent */
}

div.align-1 > div:nth-child(3) {
  position: absolute;
  bottom: -36px; /* 2 x line-height of parent */
}

div.align-1 > div:nth-child(4) {
  position: absolute;
  bottom: -54px; /* 3 x line-height of parent */
}

div.align-2 > div:nth-child(3) {
  position: absolute;
  bottom: -18px; /* 1 x line-height of parent */
}

div.align-2 > div:nth-child(4) {
  position: absolute;
  bottom: -36px; /* 2 x line-height  of parent */
}

div.align-3 > div:nth-child(4) {
  position: absolute;
  bottom: -18px; /* 1 x line-height  of parent */
}

 Text
<div class="align-1">
  <div>line 1</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>line 4</div>
</div>
more text

<br>
<br>
<br>
<br>

<hr />
<br> Text
<div class="align-2">
  <div>line 1</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>line 4</div>
</div>
more text

<br>
<br>
<br>
<hr />
<br> Text

<div class="align-3">
  <div>line 1</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>line 4</div>
</div>
more text

<br>
<br>
<hr />
<br> Text

<div class="align-4">
  <div>line 1</div>
  <div>line 2</div>
  <div>line 3</div>
  <div>line 4</div>
</div>
more text

<br>
<hr />

​

如果您使用的是sass或更少，您可以在一个动态的混合器中使用变量元素计数。