垂直堆叠元素的基线

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或更少，你可以在动态mixin中使用它来处理可变元素数。