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

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

Πώς να χρησιμοποιήσετε το CSS float Δημιουργία παράλληλης τάβλης με ιδιότητες:

Παράδειγμα

* {
  box-sizing: border-box;
}
/* Δημιουργία διάταξης δύο στήλων */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (αφαίρεση κύμων) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Δοκιμάστε προσωπικά

Πώς να χρησιμοποιήσετε το CSS flex Δημιουργία παράλληλης τάβλης με ιδιότητες:

Παράδειγμα

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

Δοκιμάστε προσωπικά

Σημείωση:Το Flexbox δεν υποστηρίζεται στο Internet Explorer 10 και τις προηγούμενες εκδόσεις. Θα χρησιμοποιήσετε float ή flex αρκεί στον καθένα σας. Αλλά αν χρειάζεστε υποστήριξη για την IE10 και τις προηγούμενες εκδόσεις, θα πρέπει να χρησιμοποιήσετε float.

Συμβουλή:Για περισσότερες πληροφορίες σχετικά με το μονάρχη Flexible Box διάταξης, διαβάστε το Εκμάθηση CSS Flexbox.

Προσθήκη προσαρμοστικότητας

Το παραπάνω παράδειγμα δεν θα φαίνεται πολύ όμορφο σε κινητές συσκευές, καθώς οι δύο στήλες θα καταλαμβάνουν πολύ χώρο στην σελίδα.

Για να δημιουργήσετε μια προσαρμοστική τάβλη, ώστε να μετατρέπεται από διάταξη δύο στήλων σε πλήρη διάταξη για κινητά συσκευές, προσθέστε τις παρακάτω ερωτήσεις μέσων:

Παράδειγμα

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

Δοκιμάστε προσωπικά

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

Εκμάθηση:CSS πίνακας

Εκμάθηση:CSS κύματα

Εκμάθηση:CSS Flexbox