如果垂直高度增加，如何使 div 向上而不是向下扩展？

Question

我有一个带有标题和一些内容的页面。标头是一个动态值，根据内容可以有很多不同的内容。当标题较长并且需要两行或更多行时，就会出现此问题。由于我希望内容保持在相同的垂直和水平位置，因此如果标题较短，我希望较长标题的最后一行与第一行处于相同的垂直位置。我希望我能让别人理解我自己。请尝试通过添加第二个单词来编辑标题，您就会明白我的意思。我认为这个问题可以用flex-box来解决，但我不知道如何解决，我已经用

P粉481366803 · Answer

更改 .wrapper 类的 CSS：

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  border: 1px solid red;
  width: 200px;
  height: 300px;
  padding-top: 20px;
  gap: 20px;
}

在这里，我们使用 display: grid 来创建网格布局。 grid-template-rows 属性定义两行：一行用于标题，另一行用于内容。 auto 值将使标题行调整到内容高度，而 1fr 值将使内容行占用剩余空间。 align-items 和 justify-items 属性使内容在各自的行中居中。

现在，更新您的 HTML，使 h1 元素具有 class 属性，而不是 className 属性：



    Parcel Sandbox
    
  



  
    
      Header
    
    Test

通过这些更改，标头将保留在包装器的顶部，并且内容将保持在相同的垂直和水平位置，无论标头的长度如何。您可以通过更改标题文本来测试它，看看它在不同长度下的表现如何。

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程