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

Horizontale Ausrichtung von Divs

Eine häufige Layoutaufgabe besteht darin, zwei Divs horizontal auszurichten, wobei jedes seinen eigenen Titel und seine eigene Liste enthält. Obwohl Tabellen dies leicht erreichen können, ist die Verwendung von Tabellen für das Layout oft unerwünscht. Um Divs horizontal auszurichten, ohne auf Tabellen zurückzugreifen, sollten Sie den folgenden Ansatz in Betracht ziehen:

Floating Divs in einem übergeordneten Container

Floating der Divs innerhalb eines übergeordneten Containers. Durch Floating können Divs horizontal nebeneinander positioniert werden. Stellen Sie sicher, dass der übergeordnete Container wie folgt gestaltet ist:

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

• float: left: Verschiebt die Divs nach links innerhalb des übergeordneten Containers.
• clear: none: Ermöglicht, dass die Divs daneben fließen einander ohne Clearing a Zeile.

Beispiel

<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>

Bei diesem Ansatz werden die Divs horizontal ausgerichtet, wobei jedes seinen Titel und seine Liste enthält, ohne dass Tabellen erforderlich sind .

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