简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie kann ich dafür sorgen, dass ein Div nach oben statt nach unten erweitert wird, wenn die vertikale Höhe zunimmt?
P粉530519234
P粉530519234 2024-03-22 10:39:08
0
1
286

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:

P粉530519234
P粉530519234

Antworte allen(1)
P粉481366803
P粉4813668032024-03-23 00:51:03 1 Etage

更改 .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

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！