如果垂直高度增加，如何使 div 向上而不是向下扩展？-PHP中文网问答

我有一个带有标题和一些内容的页面。标头是一个动态值，根据内容可以有很多不同的内容。当标题较长并且需要两行或更多行时，就会出现此问题。由于我希望内容保持在相同的垂直和水平位置，因此如果标题较短，我希望较长标题的最后一行与第一行处于相同的垂直位置。

我希望我能让别人理解我自己。请尝试通过添加第二个单词来编辑标题，您就会明白我的意思。

我认为这个问题可以用 flex-box 来解决，但我不知道如何解决，我已经用 flex-end 等尝试了很多不同的东西。

这是我的代码示例：

.main {
  display: flex;
  justify-content: center;
  min-height: 200px;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid red;
  width: 200px;
  height: 300px;
  padding-top: 20px;
  gap: 20px;
}

.header-div {
  display: flex;
  border: 1px solid blue;
  align-items: center;
  text-align: center;
  max-width: 100px;
}

.header {
  border: 1px solid green;
}

.content {
  border: 1px solid green;
}

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="main">
  <div class="wrapper">
    <div class="header-div">
      <h1 className="header">Header</h1>
    </div>
  <div class="content">Test</div>
    </div>
</div>

</body>

</html>

提前致谢！

编辑这是一张制作不佳的图像，它说明了我的目标。左图是标题占据一行时的情况，第二张图是标题占据两行时的情况：

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

全部回复(1)

P粉4813668032024-03-23 00:51:03 1楼

更改 .wrapper 类的 CSS：

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

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



    Parcel Sandbox
  
    
      Header
    
    Test

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

赞 +0

添加回复