Πώς να δημιουργήσετε: τρεις στήλες διάταξη

Πώς να δημιουργήσετε τρεις στήλες διάταξη

Πρώτη βήμα - Προσθήκη HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Δεύτερη βήμα - Προσθήκη CSS:

Σε αυτό το παράδειγμα, θα δημιουργήσουμε τρειςίσαστέςλες:

Παράδειγμα

.column {
  κύμα: αριστερά;
  πλάτος: 33.33%;
}
/* Καθαρισμός κύματος μετά τις στήλες */
.row:after {
  περιεχόμενο: "";
  προβολή: πίνακας;
  καθαρισμός: και;
}

Προσωπικά δοκιμάστε

Σε αυτό το παράδειγμα, θα δημιουργήσουμε τρειςΜη ίσαστέςλες:

Παράδειγμα

.column {
  κύμα: αριστερά;
}
.left, .right {
  πλάτος: 25%;
}
.middle {
  πλάτος: 50%;
}

Προσωπικά δοκιμάστε

Σε αυτό το παράδειγμα, θα δημιουργήσουμε ένανΠροσαρμοσμένηΤρεις στήλες διάταξη:

Παράδειγμα

/* Προσαρμοσμένη διάταξη - Όταν το πλάτος του οθόνης είναι μικρότερο από 600px, τα τρία στήλες θα συνοψίζονται, αντί να είναι παράλληλα */
@μέσα σε screen και (μέγιστο πλάτος: 600px) {
  .column {
    πλάτος: 100%;
  }
}

Προσωπικά δοκιμάστε

Σχετικές σελίδες

Εκμάθηση:Διάταξη ιστοσελίδας CSS

Εκμάθηση:CSS Απλή ανταπόκριση σχεδιασμός ιστοσελίδας