垂直堆叠元素的基线

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

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

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

Answer 2

这使得容器的基线与第三个childdiv.

的基线重合

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

垂直堆叠元素的基线

Baseline of vertically stacked elements

html

css

vertical-alignment