Die Höhe des Blocks nach Inhalt ist eines der Hauptprobleme, mit denen Webentwickler konfrontiert sind. Wenn sich der Inhalt eines Blocks ändert oder dynamisch ist, muss die Höhe automatisch an seine Änderungen angepasst werden. In diesem Artikel werden wir uns 5 Methoden ansehen, mit denen Sie den Block nach Inhalt hoch machen können.
1. Methode mit der overflow-Eigenschaft
Eine einfache Möglichkeit, einen Block nach Inhalt hoch zu machen, besteht darin, die Overflow-Eigenschaft zu verwenden. Sie können den Wert auf auto oder hidden setzen, damit das Scrollen des Inhalts innerhalb des Blocks deaktiviert oder nur bei Bedarf angezeigt wird.
Diese Methode eignet sich, wenn der Block automatisch an die Größe des darin enthaltenen Inhalts angepasst werden soll, ohne dass die Seite gescrollt wird.
.block
2. Methode mit der display-Eigenschaft
Eine weitere Methode, die verwendet werden kann, um einen Block mit einer Höhe über den Inhalt zu erreichen, ist die display-Eigenschaft mit einem zusätzlichen Tabellenzellenwert. Wenn Sie diesen Wert angeben, verhält sich der Block wie eine Tabellenzelle, und seine Höhe wird automatisch an den Inhalt angepasst.
Diese Methode kann nützlich sein, wenn Sie eine Struktur mit fester Breite und dynamischer Höhe erstellen möchten, z. B. um eine Bildergalerie zu erstellen.
.block
[Fortsetzung im Artikel]
Wie man eine automatische Blockhöhe erreicht - 5 nützliche Methoden
Wenn wir Webseiten erstellen, besteht oft die Notwendigkeit, einen Block zu erstellen, der seine Höhe automatisch an den Inhalt anpasst. In diesem Abschnitt werden wir fünf nützliche Methoden untersuchen, um dies zu erreichen.
1. Verwenden der Eigenschaft height: auto; : Mit dieser Methode kann ein Block seine Höhe basierend auf dem darin enthaltenen Inhalt automatisch ändern. Fügen Sie diese Eigenschaft einfach dem Stil Ihres Blocks hinzu und Sie erhalten einen Block mit einer Höhe, die seinem Inhalt entspricht.
2. Verwenden der Eigenschaft display: inline-block; : Mit dieser Methode kann sich ein Blockelement wie ein Inline-Element verhalten, jedoch alle Blockeigenschaften beibehalten. Der Block wird basierend auf seinem Inhalt automatisch erweitert und komprimiert.
3. Verwenden des Clearfix-Tools: wenn Sie einen Block mit etwas Inhalt haben und Probleme mit seiner Höhe haben, können Sie die Klasse "clearfix" auf das übergeordnete Element des Blocks anwenden. Dadurch werden spezielle Stile hinzugefügt, die es dem Block ermöglichen, die richtige Höhe anzunehmen.
4. Verwenden der Flexbox-Eigenschaft : dies ist eine neue CSS-Technik, mit der Sie flexible Layouts erstellen können. Ein Vorteil der Verwendung von Flexbox ist die Möglichkeit, die Höhe eines Blocks basierend auf seinem Inhalt automatisch zu ändern. Fügen Sie einfach den Display: Flex-Stil hinzu; zum übergeordneten Element des Blocks, und der Block passt seine Höhe automatisch an.
5. JavaScript verwenden: Wenn alle oben genannten Methoden nicht funktionieren oder Sie mehr Kontrolle über die Blockhöhe benötigen, können Sie JavaScript verwenden. Mit JavaScript können Sie eine Funktion schreiben, die die Höhe eines Blocks basierend auf seinem Inhalt automatisch ändert. Darüber hinaus können Sie mit JavaScript eine Animation erstellen, um die Blockhöhe zu ändern, so dass sie sich nahtlos ausdehnt oder komprimiert.
Hier sind fünf nützliche Techniken, die Ihnen helfen, die automatische Blockhöhe zu erreichen. Sie können je nach Ihren Anforderungen und Vorlieben eine geeignete Methode wählen. Wählen Sie die Methode aus, die für Ihr Projekt am besten geeignet ist, und erstellen Sie einen Block, der gummiartig ist und seine Höhe automatisch ändert!
Verwenden Sie die Eigenschaft height: auto
Die Eigenschaft height: auto ermöglicht es einem Element, seine Höhe automatisch basierend auf dem Inhalt zu berechnen. Dies ist besonders nützlich, wenn Sie die genaue Höhe eines Blocks nicht kennen oder wenn Sie möchten, dass der Block basierend auf der Länge seines Inhalts skaliert wird.
Zum Beispiel, wenn Sie einen Block mit Text darin haben und Sie ihn auf height setzen: auto , dann wird der Block automatisch erweitert oder komprimiert, abhängig von der Menge des darin enthaltenen Textes.
Um die Eigenschaft height: auto zu verwenden, fügen Sie sie einfach der CSS-Regel für das entsprechende Element hinzu:
.blockЗдесь может быть любое содержимое
Auf diese Weise wird der Block automatisch gedehnt oder komprimiert, um der Größe seines Inhalts anzupassen, ohne dass explizit eine feste Höhe angegeben werden muss.
Wenden Sie die Eigenschaft display an: inline-block
Um diese Eigenschaft auf einen Block anzuwenden, müssen Sie sie im CSS angeben, indem Sie einen Wert angeben display: inline-block. Sobald diese Eigenschaft angewendet wurde, wird der Block zu einem Bestandteil der Zeile, behält jedoch seine Blockeigenschaften bei, einschließlich der Möglichkeit, Breite, Höhe und Einzug festzulegen.
Eigenschaften anwenden display: inline-block besonders nützlich für Elemente, die Textinhalte enthalten und sich automatisch an ihre Größe anpassen müssen. Dadurch können Sie Blöcke erstellen, die sich automatisch an die Länge des Textes anpassen und Probleme beim Verschieben des Inhalts in die nächste Zeile vermeiden.
Es ist jedoch zu berücksichtigen, dass die Eigenschaft display: inline-block fügt einen kleinen Platz zwischen den Blöcken hinzu, da Leerzeichen und Zeilenumbrüche im HTML-Code berücksichtigt werden. Um dies zu beheben, können Sie eine Eigenschaft für das übergeordnete Element festlegen font-size: 0 und dann innerhalb des Blocks mit der Eigenschaft display: inline-block legen Sie die gewünschte Schriftgröße fest. Auf diese Weise werden Lücken und Einrückungen zwischen den Blöcken entfernt.
Verwenden Sie die Methode clear: both
Wenn Sie den Block nach Inhalt hoch machen möchten, aber andere Elemente oder Blöcke haben, die ihn umkreisen, können Sie die clear: both Methode verwenden. Mit dieser Eigenschaft können Sie dem Browser angeben, dass er die Elemente links und rechts nicht umkreist. Auf diese Weise wird der Block in seinem Inhalt hoch sein, ohne Platz unter anderen Elementen einzunehmen.
Um die clear: both-Methode zu verwenden, müssen Sie den entsprechenden Stil für das Element festlegen, für das die Höhe nach Inhalt festgelegt werden soll. Sie können einen inneren Stil oder ein externes Stylesheet (CSS) verwenden. Dabei muss der clear: both-Stil unmittelbar nach allen anderen Elementen, die umbrochen werden müssen, auf das Element angewendet werden.
Beispiel für die Verwendung der clear-Methode: both:
| Der Text | Der Text | Der Text |
| Block mit Höhe nach Inhalt | ||
| Der Text | Der Text | Der Text |
Im obigen Beispiel wird ein Block mit einer Höhe über den Inhalt unterhalb der Tabelle platziert, ohne sie zu umschließen, da der Stil clear: both verwendet wird. Dadurch können Sie die Höhe des Blocks anhand seines Inhalts festlegen und verhindern, dass er von anderen Elementen überlappt wird.
Clear-Methode: both ist eine von fünf nützlichen Methoden, um einen Block mit einer Höhe nach Inhalt zu erstellen. Betrachten Sie andere Methoden in den folgenden Abschnitten dieses Artikels.
Wenden Sie die Overflow-Eigenschaft an: auto
Die Eigenschaft overflow: auto kann nützlich sein, wenn Sie einen Block mit einer Höhe nach Inhalt erstellen. Mit dieser Eigenschaft können Sie einem Block Bildlaufleisten hinzufügen, wenn sein Inhalt seine Größe überschreitet.
Um die Eigenschaft overflow: auto zu verwenden, müssen Sie eine feste Höhe für Ihren Block festlegen und den Wert overflow: auto festlegen.
Здесь может быть любое содержимое.
Если содержимое блока превышает его высоту, появляются полосы прокрутки.
In diesem Beispiel hat der Block eine Höhe von 200 Pixeln. Wenn der Inhalt des Blocks diese Höhe überschreitet, werden vertikale Bildlaufleisten angezeigt, mit denen Sie durch den Inhalt des Blocks blättern können.
Mit der Eigenschaft overflow: auto können Sie einen Inhaltshöhe-Block erstellen, der beim Hinzufügen größerer Inhalte erweitert oder vergrößert wird.
Beachten Sie jedoch, dass die Eigenschaft overflow: auto dem Block nur Bildlaufleisten hinzufügt, wenn sein Inhalt seine Größe überschreitet. Wenn der Inhalt des Blocks in seine Größe passt, werden keine Bildlaufleisten angezeigt.
