Ich habe eine Seite mit einem Titel und etwas Inhalt. Der Header ist ein dynamischer Wert und kann je nach Inhalt viele unterschiedliche Inhalte haben. Dieses Problem tritt auf, wenn der Titel lang ist und zwei oder mehr Zeilen erfordert. Da ich möchte, dass der Inhalt in der gleichen vertikalen und horizontalen Position bleibt, möchte ich, dass die letzte Zeile des längeren Titels in der gleichen vertikalen Position ist wie die erste Zeile, wenn der Titel kürzer ist.
Ich hoffe, dass ich andere dazu bringen kann, mich selbst zu verstehen. Versuchen Sie bitte, den Titel zu bearbeiten, indem Sie ein zweites Wort hinzufügen. Dann werden Sie sehen, was ich meine.
Ich denke, dieses Problem kann mit Flex-Box gelöst werden, aber ich weiß nicht wie, ich habe viele verschiedene Dinge mit Flex-End usw. ausprobiert.
Das ist mein Codebeispiel:
.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>
Vielen Dank im Voraus!
Bearbeiten Dies ist ein schlecht gemachtes Bild, das mein Ziel veranschaulicht. Das Bild links zeigt die Situation, wenn der Titel eine Zeile einnimmt, und das zweite Bild zeigt die Situation, wenn der Titel zwei Zeilen einnimmt:
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
更改 .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 属性：
Header
通过这些更改，标头将保留在包装器的顶部，并且内容将保持在相同的垂直和水平位置，无论标头的长度如何。您可以通过更改标题文本来测试它，看看它在不同长度下的表现如何。