Jeden Tag durchforsten wir mehrere Webbrowser für unsere Arbeit, unser Studium oder unsere Unterhaltung. Es ist unglaublich, dass Programmierer mit Hilfe von HTML oder HyperText Markup Language unendlich viele Möglichkeiten in Bezug auf Struktur, Design und Befehle haben. So wichtig der Inhalt einer Website ist, so sehr kann die Einbindung mehrerer Bilder in Ihr HTML Ihr Programm hervorheben. Eine horizontale Platzierung ist leichter zu erkennen, da unser Auge von links nach rechts liest. Wenn Sie also ein neuer Programmierer sind und lernen möchten, wie man mehrere Bilder in HTML horizontal ausrichtet, brauchen Sie sich keine Sorgen mehr zu machen! In diesem Artikel zeigen wir Ihnen fünf Möglichkeiten auf, wie Sie mehrere Bilder in HTML horizontal ausrichten können.
Bevor wir mit den 5 Möglichkeiten fortfahren, möchte ich bolchevaerk.dk danken, das uns bei der Realisierung dieses Artikels geholfen hat!
1. Flexbox
Ein Flexbox- oder flexibles Box-Modell ist eine relativ neue Layout-Methode für Programmierer, um die vertikale oder horizontale Layout-Struktur einer Website durch Zeilen oder Spalten anzupassen. Mit dem Flexbox-Container können Sie die Länge oder Breite des Bildes ändern, so dass es einen bestimmten Bereich im Layout ausfüllt oder verkleinert. Eine weitere Funktion der Flexbox ist die Vorhersage der Proportionen und der Platzierung eines Bildes in Abhängigkeit von der Bildschirmgröße und dem Anzeigegerät des Betrachters.
Um Flexbox zum Ausrichten von Bildern in HTML zu verwenden, müssen Sie die folgenden Schritte horizontal ausführen:
- Öffnen Sie ein neues HTML-Dokument, damit Ihre neuen Befehle und Codes nicht mit dem Hauptdokument vermischt werden.
- Fügen Sie die gewünschten Bilder in das neue Dokument ein. Da Sie Flexbox verwenden werden, müssen Sie ein div einfügen, unter das Sie „images-container“ setzen. Die Anzahl der
, die Sie einfügen, hängt von der Anzahl der Bilder ab, die Sie in der horizontalen Zeile haben möchten.
- Fügen Sie das folgende CSS in Ihr HTML ein:
- Schreiben Sie „images-container“ und fügen Sie die Eigenschaften „display: flex;“ und „justify-content: center;“ hinzu. Wie bereits erwähnt, hilft Flexbox dabei, die Anpassung eines Bildes im Verhältnis zum Bildschirm eines Geräts vorherzusagen – das ist also die Verwendung von „display: flex“. Bei „justify-content: center“ werden alle kodierten Bilder auf der Website horizontal in der Mitte platziert.
- Obwohl dies optional ist, können Sie die visuelle Darstellung der horizontalen Bilder auf Ihrer Website verbessern, indem Sie den gewünschten Rand für jedes Bild hinzufügen. Dazu müssen Sie einen weiteren „images-container“ schreiben und „margin-left:“ eingeben und dann den gewünschten Pixel- oder px-Bereich einfügen. Führen Sie dieses Verfahren auch für „margin-right“ durch. Zum Vergleich: 96 Pixel entsprechen einem Zoll.
2 . Prevent Wrapping
Eines der ärgerlichsten Dinge, die ein Programmierer, Designer oder sogar ein Student erlebt, wenn er an einem Dokument schreibt, das einen Text enthält, in den ein Bild eingefügt werden muss, ist der Umbruch. Ein Umbruch liegt vor, wenn sich der Text an einer bestimmten Stelle um die Bilder wickelt, so dass die beiden Elemente zusammenlaufen, anstatt die Bilder an einer bestimmten Stelle zu platzieren. Im CSS Ihrer HTML-Datei kommt es zu einem Umbruch, wenn sich ein Text automatisch um das Bild herum anpasst und dabei die Wörter oder das Bild in eine andere Zeile verschiebt, wodurch die horizontale Ausrichtung Ihrer gewünschten mehreren Fotos verhindert wird. Um das Einwickeln zu verhindern, müssen Sie die folgenden Schritte durchführen:
- Fügen Sie unter dem Hauptelement #content das „whitespace:nowrap“ ein. Nowrap entfernt den typischen Leerraum in Ihrer Website, verhindert aber, dass Bilder aus den Zeilen ausbrechen.
- Eine Alternative zu „whitespace:nowrap“ ist „word-break:keep-all“. Dies funktioniert im Allgemeinen bei Textumbrüchen, ist aber dennoch von Bedeutung, wenn Sie Text neben Ihrer Bilderserie haben, der die Ausrichtung beeinflussen kann.
3. Anzeige:inline-block Methode
Der Hauptzweck von display:inline-block besteht darin, ein Bild oder ein beliebiges Element in einem Blockcontainer zu platzieren, der sich zusammen mit anderen Elementen, die Sie darin einfügen, in derselben Ausrichtungsebene befindet. Sobald sich ein Bild in dieser Eigenschaft befindet, können Sie die Werte für Breite und Höhe noch anpassen, während der Inhalt weiterhin nebeneinander liegt. Diese Eigenschaft ermöglicht es Ihnen, mehrere Bilder horizontal zu platzieren, solange Sie sie in diesen Anzeigeblöcken platzieren. Indem Sie die Eigenschaft „display:inline-block“ in Ihr HTML einfügen, können Sie dies tun.
4. Ändern Sie display:block in float:left
Ein Float ist eine Eigenschaft, die dafür sorgt, dass Ihr Bild seine Position verschiebt – in der Regel entweder nach links oder nach rechts in dem Container, dem Sie es zugewiesen haben, wodurch der Text (ärgerlicherweise) um das Bild herumfließt. Wenn Sie mehrere Bilder in einem Container platziert haben, ohne anzugeben, in welche Richtung die Bilder verschoben werden sollen, ist es wahrscheinlich, dass alle Bilder horizontal ausgerichtet sind. Um dies zu vermeiden, müssen Sie entweder:
- Schreiben Sie „<p style=” clear: both;”>
, um zu verhindern, dass die nachfolgenden Texte umbrochen werden oder an den enthaltenen Bildern hängen bleiben. Danach hat Ihre Website eine unsichtbare horizontale Linie, die dafür sorgt, dass alle neuen Bilder oder Texte in einem eigenen Absatz beginnen.
- Schreiben Sie „float: left“ in die Klasse .images, damit ihre Platzierung im Container von links beginnt. Damit stellen Sie sicher, dass alle folgenden Bilder ebenfalls ihrer Ausrichtung folgen. So sehen Sie in Ihrem HTML-Code mehrere Fotos in horizontaler Ausrichtung.
5. Prüfen Sie, ob das Element Körper 100% ist
Es gibt Fälle, in denen mehrere Bilder nicht horizontal ausgerichtet werden können, weil die Höhe nicht 100% beträgt. Sie können versuchen, „margin 0: auto“ oder „text-align: center“ zu Ihren Bildern in einem Blockelement zu schreiben. Sie sollten einen der beiden angegebenen Texte unter dem übergeordneten Befehl einfügen. Diese Lösung funktioniert jedoch nicht in allen Browsern, aber in den meisten. Sie brauchen sich keine Sorgen zu machen, wenn Ihr HTML-Browser zu Microsoft Edge, Google Chrome, Opera oder Safari gehört, denn diese Funktion funktioniert auch bei ihnen.
Wenn Sie auf der Suche nach einem exzellenten Bildbearbeitungsdienst sind, sollten Sie fixthephoto.com besuchen und sehen, was man mit Ihren Bildern alles machen kann, um sie noch besser aussehen zu lassen.
Aus der Anleitung mitnehmen: Wie man mehrere Bilder in HTML horizontal ausrichtet
Sie können eine langweilige, scrollbare‘ Website in einen Hingucker verwandeln, indem Sie auffällige Bilder einfügen. Allerdings kann die Erstellung Ihrer Website viel Zeit in Anspruch nehmen, da Sie viele Codes eingeben müssen. Wenn Sie wissen, wie Sie mehrere Bilder in HTML horizontal ausrichten können, ist das von Vorteil, egal ob Sie ein leidenschaftlicher Webprogrammierer, ein Freiberufler oder ein langjähriger Webdesigner sind. Nachdem Sie die drei Möglichkeiten kennengelernt haben, werden Sie hoffentlich feststellen, dass eine Lösung einfacher oder komplizierter ist als die andere – und das ist in Ordnung. Als Programmierer sollten Sie das Verfahren anwenden, das Ihnen am effektivsten und bequemsten erscheint, ganz gleich, wie lange oder kurz es dauert, solange Sie dabei nicht die Qualität Ihrer Arbeit aufs Spiel setzen.
Lesen Sie auch unsere Anleitung zum Löschen von Formulardaten nach dem Absenden in HTML
