垂直堆叠元素的基线答案

【问题标题】：Baseline of vertically stacked elements垂直堆叠元素的基线
【发布时间】：2015-12-28 04:18:52
【问题描述】：

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

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

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

如何使用 CSS 做到这一点？

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

我想给这个容器一个属性display: inline-block。此容器出现在一行中的其他元素旁边，我希望它们根据基线对齐。

【问题讨论】：

堆叠元素的高度是否已知或可预测？
@ChrisBaker 没有。一般来说没有。
我认为这仅使用 CSS 是不可行的。出于对您得到的答案的好奇，为问题加注星标。
有可能，给我一些时间找到它在哪里..
很好的后续行动，迈克尔——你能在范围内后退一步吗？它可能会开辟一些其他的可能性。基线会对父元素相对于其兄弟元素或文档的布局产生什么影响？

标签： html css vertical-alignment

【解决方案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>

【讨论】：

这看起来很完美。谢谢。

【解决方案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 中使用它来处理可变元素计数。

【讨论】：

是的，这就是我想要的结果，但是容器中的元素数量没有预定义。该解决方案需要设置元素的最大数量并相应地定义 CSS 类。
@sawa 这是真的——不幸的是，这是我目前能想到的最多的事情。要让它在任何元素计数中工作，您需要在此解决方案中使用 js。