Sechs Möglichkeiten, Elemente horizontal anzuordnen

Wie wir alle wissen, werden Elemente auf Blockebene standardmäßig vertikal angeordnet, und Elemente auf Blockebene werden grundsätzlich im Layout verwendet, z. B. div und andere gängige Tags auf Blockebene -Ebenen-Elemente auch horizontal angeordnet werden? In diesem Artikel werden sechs Möglichkeiten vorgestellt, wie Sie eine horizontale Anordnung von Elementen auf Blockebene erreichen können.

Der erste Typ: Anzeige: Inline-Block

Zunächst müssen Sie Blockelemente und Inline-Elemente verstehen

Block- Ebenenelemente: Zu den Elementen auf Blockebene gehören Breite, Höhe, Rand und Rand. Sie sind von oben nach unten angeordnet. Zu den Elementen auf Blockebene gehören div, p, form, ul usw.

Inline-Elemente: Die Höhe und Breite wird durch den Inhalt bestimmt. Es gibt keinen festen Rand und die Anordnung erfolgt horizontal. Zum Beispiel a, span, label, button, img, input...

Einige Leute haben hier möglicherweise Fragen: „Button, img, input und andere Beschriftungen können Breite und Höhe sowie Rand und festlegen.“ padding. Warum ist es wirklich ein Inline-Element? „Tatsächlich gibt es zwei Möglichkeiten, HTML-Elemente zu unterteilen, nämlich „Elemente auf Blockebene und Inline-Elemente“ und „ersetzbare Elemente und nicht ersetzbare Elemente.“ Die erste Teilungsmethode wird oben vorgestellt, und die zweite Teilungsmethode wird unten vorgestellt:

Ersatzelement: Nach allgemeiner Auffassung handelt es sich um ein Element mit Breiten- und Höhenattributen. Das Ersetzungselement ähnelt dem display:inline-block-Element. Sie können die Höhe, die Breite sowie die inneren und äußeren Ränder festlegen. Es umfasst hauptsächlich img, input, textarea, select, object, audio und canvas ist ein Ersatzelement.

Nicht ersetzbare Elemente: Mit Ausnahme der Ersatzelemente sind die übrigen nicht ersetzbare Elemente (O(∩_∩)O)

Nach viel Unsinn wissen wir, dass display: inline -block kann die Elemente horizontal anordnen, aber bei diesem Layout gibt es möglicherweise ein kleines Problem:

<style>
        div{
            display:inline-block;    width:200px;    height:200px;
        }
        .div1{
            background:green;
        }
        .div2{
            background:red;
        }
</style>
<div class = "div1">左边</div>
<div class = "div2">右边</div>

Hier haben wir eine Lücke zwischen den beiden Divs gefunden.

Der Browser behandelt Zeilenumbrüche, Einzüge und Leerzeichen als ein Leerzeichen. Auch wenn zwei Leerzeichen oder ein Zeilenumbruch plus ein Leerzeichen usw. vorhanden sind, werden sie in ein Leerzeichen analysiert. Die Größe dieses Bereichs beträgt Schriftgröße/2. Es gibt viele Möglichkeiten, diese Lücke zu schließen.

1. Legen Sie den linken Rand von div2:-font-size/2 fest.

2. Legen Sie die Schriftgröße der übergeordneten Tags der beiden Divs fest: 0

3. Negativen Wortabstand festlegen

Der zweite Typ: float: links/rechts

Das Float-Attribut kann dazu führen, dass das Element vom regulären Dokumentfluss abweicht. entlang der linken Seite des Behälters oder horizontal auf der rechten Seite anordnen.

Man kann sagen, dass diese Methode am häufigsten verwendet wird, aber beim adaptiven Layout gibt es ein Problem: Höhe und Breite von Elementen sind im Allgemeinen nicht festgelegt und werden automatisch entsprechend der Inhaltsgröße angepasst Wenn alle untergeordneten Elemente schwebende Elemente sind, kommt es zu einem hohen Grad an Kollaps.

Geben Sie eine Kastanie

<style>
        span{
            float:left;        width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
</style>
<div>
    <span class = "box1">左边</span>
    <span class = "box2">右边</span>
</div>

Hier wird das Unterelement div in der vorherigen Kastanie absichtlich in span geändert. Tatsächlich möchte ich ausdrücken, dass float Elemente implizit in Blockelemente umwandeln kann (. position:absolute/fixed (ebenfalls verfügbar), sodass Breite und Höhe auf natürliche Weise eingestellt werden können.

Was ist also das Problem, nachdem die Kartons horizontal angeordnet sind? Das stimmt! Die Höhe des übergeordneten Containers wird reduziert. Zu diesem Zeitpunkt beträgt die Höhe des übergeordneten Container-Div 0, da das schwebende Element vom regulären Dokumentfluss abweicht und sein übergeordneter Container es bei der Berechnung der Höhe ignoriert. Das ist etwas, was wir nicht sehen wollen, denn wenn sich hinter diesem stark reduzierten DIV andere reguläre Flow-Tags befinden, wird die Seite durcheinander gebracht und es treten andere unerwünschte Ergebnisse auf.

Die Lösung besteht natürlich darin, Floats zu löschen. Es gibt zwei Hauptmethoden zum Löschen von Floats:

1.clear:left/right/both, das speziell zum Löschen von Floating-CSS verwendet wird.

2.BFC, da BFC eine Regel hat: „Bei der Berechnung der BFC-Höhe nehmen auch schwebende Elemente an der Berechnung teil.“

Lassen Sie uns über verschiedene Methoden zum Löschen von Floats mit „clear“ sprechen:

1. Fügen Sie nach dem letzten untergeordneten Element ein leeres Tag hinzu und legen Sie dann dessen Stil „clear:both“ fest.

2. Verwenden Sie im letzten schwebenden untergeordneten Element das Pseudoelement::after, um einen klaren Stil hinzuzufügen, um das schwebende

Der dritte Typ: Tabellenlayout

Diese Layoutmethode wird eigentlich nicht häufig verwendet, da sie verschiedene Probleme mit sich bringt.

Die Rendering-Geschwindigkeit ist langsam

Erhöht die Menge an HTML-Code und ist schwer zu warten

Der Name des Tags entspricht nicht der Semantik von HTML Table is Ursprünglich für Tabellen verwendet, wird es nicht einmal für das Layout verwendet.

Die Tag-Struktur ist relativ starr und die Kosten für spätere Änderungen sind höher

usw. Ich werde nicht näher darauf eingehen zu viel hier. Kurz gesagt, versuchen Sie, das Tabellenlayout zu verwenden

Die vierte Methode: absolute Positionierung

Diese Methode wird auch häufiger in der täglichen Entwicklung verwendet, Float kann Elemente erstellen Für den regulären Dokumentenfluss hat position:absolute/fixed auch den gleichen Effekt. Die Verarbeitungsmethode wurde im Float-Layout erwähnt, sodass Sie sie einfach hier verschieben können.

Hier möchte ich über die absolute Positionierung sprechen, die auf dem ersten übergeordneten Element basiert und ein statisch positioniertes Element ist, z. B. position:absolute/relative/fixed. Wenn es nicht gefunden werden kann, verwenden Sie die Wurzel Das Element dient als Basis für die Positionierung. Im Allgemeinen wird das übergeordnete Element position:ralative in Kombination mit dem untergeordneten Element position:absolute verwendet.

Der fünfte Typ: flexibles CSS3-Layout

弹性布局因为其兼容性所以还没有得到广泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器一样，早晚都会干败flash，只是时间问题！！！

第六种：transform:translate

CSS3中用于动画的一个样式，但是他可是让两个元素横向排列，这里不多说直接上代码，请用谷歌浏览器运行一下：

<style>
        div{
            width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            transform: translateX(200px) translateY(-200px);
            background:red;
        }
    </style>
<div>
    <div class = "box1">左边</div>
    <div class = "box2">右边</div>
</div>

效果和前几种方式一样。

以上就是我说分享实现横向布局的六种方式，其实每种方式都有很多大学问，我解释描述了冰山一角，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

Das obige ist der detaillierte Inhalt vonSechs Möglichkeiten, Elemente horizontal anzuordnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!