Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie richtet man Divs horizontal aus, ohne Tabellen zu verwenden?

Barbara Streisand
Freigeben: 2024-11-21 00:11:14
Original
289 Leute haben es durchsucht

How to Horizontally Align Divs Without Using Tables?

Horizontale Div-Ausrichtung

Um zwei Divs horizontal auszurichten, ohne Tabellen zu verwenden, schweben Sie sie in einem übergeordneten Container. Hier ist eine detaillierte Aufschlüsselung, wie Sie dies erreichen:

  1. Float the Divs:

    • Fügen Sie die folgende CSS-Eigenschaft hinzu Die Divs:

      float: left;
      Nach dem Login kopieren
  2. Floats löschen:

    • Um zu verhindern, dass die Divs zusammenbrechen Wenn unerwünschte Elemente im übergeordneten Element vorhanden sind, fügen Sie einem übergeordneten Element die folgende Eigenschaft hinzu Element:

      clear: none;
      Nach dem Login kopieren
  3. Beispiel für HTML und CSS:

    • Hier ist ein Beispiel von wie Ihr HTML und CSS es könnten Schauen Sie:

      <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>
      Nach dem Login kopieren
      .aParent div {
        float: left;
        clear: none; 
      }
      Nach dem Login kopieren

Diese Methode ist eine saubere und unkomplizierte Möglichkeit, Divs horizontal auszurichten, ohne Tabellen zu verwenden.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage