时间戳

首页 > 解决方案 > 在 CSS 中跨 flexbox 容器对齐文本基线

css - 在 CSS 中跨 flexbox 容器对齐文本基线

问题描述

我想创建这个布局：

我可以使用 flexbox 和align-self: baseline：

<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
  <div style="font-size: 24pt">Ferry to Brookfield</div>
  <div style="font-size: 96pt; align-self: baseline">3</div>
  <div style="font-size: 9pt; align-self: baseline">min</div>
</div>

这看起来像（JSFiddle）：

从这里开始，我不知道如何添加文本“leave in”，使其基线与文本“3 min”对齐。这是一个尝试（JSFiddle）。

如何在 CSS 中创建此布局？

标签： cssflexboxcss-grid

解决方案

尝试这个...

<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
    <div style="display: flex; flex-direction: row;justify-content: space-between">
        <div>
            <h1 style="font-size: 24pt;font-weight:300;margin-bottom:47px">Ferry to Brookfield</h1>
            <div style="font-size: 9pt; text-align: right;">leave in</div>
        </div>
        <div style="font-size: 96pt">3<span style="font-size:9pt">min</span></div>
    </div>
</div>

推荐阅读