So verhindern Sie, dass div in CSS eingeschlossen wird

Im Webdesign gibt es ein Szenario, in dem eine Reihe von Elementen horizontal statt vertikal angeordnet werden muss. Wenn Sie beispielsweise Tabellen oder Bilder anzeigen, müssen Elemente häufig horizontal angeordnet werden. Zu diesem Zeitpunkt müssen wir Div-CSS verwenden, um sie ohne Umbruch anzuzeigen.

1. Verwenden Sie display:inline-block

Wir können die Eigenschaft display:inline-block in CSS verwenden, um die horizontale Anordnung von div-Elementen zu erreichen. Nachdem das Anzeigeattribut des div-Elements auf „inline-block“ gesetzt wurde, können die div-Elemente in derselben Reihenfolge von links nach rechts wie Text angeordnet werden. Es ist jedoch zu beachten, dass diese Methode eine einheitliche Einstellung von „font-size:0“ für das übergeordnete Element erfordert, da sonst Lücken im div-Element auftreten.

Codebeispiel:

<style>
    .parent {
        font-size: 0; /* 必须设置为0，否则会出现空隙 */
    }
    .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

2. Verwenden Sie float:left

Eine andere Möglichkeit, eine Div-CSS-Anzeige ohne Zeilenumbrüche zu erreichen, ist die Verwendung des float:left-Attributs. Nachdem das Float-Attribut des div-Elements auf links gesetzt wurde, können die div-Elemente horizontal angeordnet werden. Es ist jedoch zu beachten, dass diese Methode das Löschen des Floats im übergeordneten Element erfordert, da sonst die Höhe des übergeordneten Elements zusammenbricht.

Codebeispiel:

<style>
    .parent {
        overflow: hidden; /* 清除浮动 */
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

3. Verwenden Sie display:flex

In CSS3 wurde das Attribut display:flex hinzugefügt, mit dem die horizontale Anordnung von div-Elementen einfach realisiert werden kann. Wenn Sie das Anzeigeattribut des übergeordneten Elements auf „Flex“ setzen, können die untergeordneten Elemente automatisch angeordnet und die Reihenfolge der untergeordneten Elemente angepasst werden, was sehr flexibel ist.

Codebeispiel:

<style>
    .parent {
        display: flex;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

IV Zusammenfassung

Zusammenfassend können wir display:inline-block, float:left, display:flex und andere CSS-Eigenschaften verwenden, um eine div-CSS-Anzeige ohne Zeilenumbruch zu erreichen. Unter diesen wird display:inline-block häufig verwendet, um mit Browsern niedrigerer Versionen kompatibel zu sein, während float:left hinsichtlich der Kompatibilität sehr stabil ist. Display:flex ist die beliebteste Methode und kann beim Umgang mit verschiedenen komplexen Layouts eine sehr flexible Rolle spielen.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass div in CSS eingeschlossen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!