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

Horizontale Ausrichtung von Divs ohne Tabellen

Im Webdesign kommt es häufig vor, Elemente horizontal auszurichten, insbesondere wenn Inhalte in Spalten dargestellt werden. Obwohl Tabellen eine einfache Lösung für diese Aufgabe darstellen, ist ihre Verwendung möglicherweise nicht immer wünschenswert. Dieser Artikel befasst sich mit der Frage der horizontalen Ausrichtung von Div-Elementen, ohne auf Tabellen zurückzugreifen.

Verwendung von Float und übergeordnetem Container

Die grundlegende Technik zur horizontalen Ausrichtung von Divs beinhaltet die Verwendung der Float-Eigenschaft . Float bewirkt, dass ein Element entlang einer angegebenen Richtung verschoben wird und es an benachbarten Elementen ausgerichtet wird. Um eine horizontale Ausrichtung zu erreichen, können die folgenden Prinzipien angewendet werden:

1. Erstellen Sie einen übergeordneten Container: Wickeln Sie die Divs in einen übergeordneten Container. Dieser Container stellt den Kontext für die horizontale Ausrichtung bereit.
2. Divs schweben lassen: Setzen Sie die Float-Eigenschaft für alle untergeordneten Divs im übergeordneten Container auf „links“. Dadurch werden die Divs nach links verschoben.
3. Float löschen: Um zu verhindern, dass der übergeordnete Container zusammenbricht, wenden Sie den Befehl „clear: none;“ an. Stil zu den untergeordneten Divs. Dadurch wird sichergestellt, dass die Höhe des übergeordneten Containers nicht durch die schwebenden untergeordneten Divs beeinflusst wird.

4. Beispielcode:

   .aParent div {
    float: left;
    clear: none; 
   }
   
   .aParent {
    /* Add any additional styles for the parent container here */
   }

   Nach dem Login kopieren

<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 die Implementierung dieses Ansatzes werden die Divs horizontal ausgerichtet, während die angegebene Struktur und der angegebene Abstand beibehalten werden.

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