Wie kann ich Divs in HTML horizontal ausrichten, ohne Tabellen zu verwenden?

Horizontale Div-Ausrichtung ohne Tabellen

In HTML gibt es verschiedene Möglichkeiten, Elemente auszurichten. Während es einfach ist, Divs mithilfe von Tabellen auszurichten, bevorzugen einige einen nicht tabellarischen Ansatz. So erreichen Sie eine horizontale Div-Ausrichtung, ohne auf Tabellen angewiesen zu sein:

Verwenden von CSS Float und Clear

1. Erstellen Sie ein übergeordnetes Div: Wickeln Sie die beiden gewünschten Divs ein In einem übergeordneten Div ausrichten.
2. Die Divs schweben lassen:Hinzufügen der Schwimmer: links; Eigentum an den untergeordneten Divs. Dadurch schweben sie auf der linken Seite ihres übergeordneten Elements.
3. Float löschen: Um zu verhindern, dass die untergeordneten Divs vertikal gestapelt werden, fügen Sie den Befehl „clear: none;“ hinzu. Eigentum an die übergeordnete Div. Dadurch wird verhindert, dass Elemente die schwebenden Divs umschließen.

Beispielcode

.aParent div {
    float: left;
    clear: none; 
}

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
</div>

Durch Befolgen dieser Schritte können Sie zwei Divs horizontal ausrichten und vermeiden, dass Sie umsortieren müssen zu tabellarischen Layouts in Ihren Webseiten.

Das obige ist der detaillierte Inhalt vonWie kann ich Divs in HTML horizontal ausrichten, ohne Tabellen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!