Πώς να δημιουργήσετε: Μίγμα στήλων

Μάθετε πώς να χρησιμοποιήσετε το CSS για να δημιουργήσετε ένα δίκτυο μίξης στήλων.

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

Αλλάξτε το μέγεθος του παραθύρου του περιηγητή για να δείτε την προσαρμοσμένη διάταξη:

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

Πώς να δημιουργήσετε ένα μίγμα στήλων

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

<div class="γραμμή">
  <div class="στήλη"></div>
  <div class="στήλη"></div>
  <div class="στήλη"></div>
  <div class="στήλη"></div>
</div>

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

Σε αυτό το παράδειγμα, θα δημιουργήσουμε μια διάταξη τεσσάρων στήλων, η οποία θα μετατρέπεται σε δύο στήλες όταν το πλάτος του οθόνης είναι κάτω από 900 εικονοστοιχεία. Ωστόσο, όταν το πλάτος του οθόνης είναι κάτω από 600 εικονοστοιχεία, οι στήλες θα είναι σε στρώματα, αντί για παράλληλα.

/* Δημιουργία τεσσάρων ίσων στήλων, ώστε να κύματα μαζί */
.στήλη {
  κύμα: αριστερά;
  χρώμα: 25%;
}
/* Καθαρισμός κύματος */
. γραμμή:after {
  περιεχόμενο: "";
  έμφανισμα: πίνακας;
   καθαρισμός: και;
}
/* Προσαρμοσμένη διάταξη - Καταστήστε τη διάταξη σε δύο στήλες αντί για τέσσερις */
@μέσα από οθόνη και (μέγιστο-πλάτος: 900px) {
  .στήλη {
    χρώμα: 50%;
  }
}
/* Προσαρμοσμένη διάταξη - Καταστήστε τις δύο στήλες σε στρώματα, αντί για παράλληλα */
@μέσα από οθόνη και (μέγιστο-πλάτος: 600px) {
  .στήλη {
    χρώμα: 100%;
  }
}

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

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

Οδηγός:Διάταξη ιστοσελίδας CSS

Οδηγός:Αστική σχεδίαση ιστοσελίδας CSS