Πώς να δημιουργήσετε: Δίπολη διάταξη
- Προηγούμενη σελίδα Λήψη στοιχείου iframe
- Επόμενη σελίδα Διάταξη τριών στήλων
Μάθετε πώς να δημιουργήσετε ένα δίπολο δίκτυο χρησιμοποιώντας CSS.
Στήλη 1
Κάποια κείμενα...
Στήλη 2
Κάποια κείμενα...
Πώς να δημιουργήσετε μια δίπολη διάταξη
Βήμα 1 - Προσθήκη HTML:
<div class="γραμμή"></div> <div class="στήλη"></div> <div class="στήλη"></div> </div>
Βήμα 2 - Προσθήκη CSS:
Σε αυτό το παράδειγμα, θα δημιουργήσουμε δύο στήλες:ισόπλατηστών στήλες:
Παράδειγμα Παράθεσης
.στήλη { παράθεση: αριστερά; πλάτος: 50%; } /* Καθαρισμός της παράθεσης μετά τις στήλες */ .γραμμή:after { περιεχόμενο: ""; προσθήκη: table; καθαρισμός: και; }
Η σύγχρονη μέθοδος δημιουργίας δίπολης διάταξης είναι η χρήση του CSS Flexbox. Ωστόσο, δεν υποστηρίζει το Internet Explorer 10 και παλιότερες εκδόσεις.
Παράδειγμα Flex
.γραμμή { προσθήκη: flex; } .στήλη { επιπέδος: 50%; }
Μπορείτε να επιλέξετε να χρησιμοποιήσετε την παράθεση ή το flex για τη δημιουργία δίπολης διάταξης. Ωστόσο, αν χρειάζεστε υποστήριξη για το IE10 και παλιότερες εκδόσεις, θα πρέπει να χρησιμοποιήσετε την παράθεση.
Συμβουλή:Για περισσότερες πληροφορίες σχετικά με το Μοντέλο Λειτουργικού Σχεδίου Εφαρμοσμένης Διαδικτυακής Σχεδίασης Flexbox, διαβάστε το Εκμάθηση CSS Flexbox。
Σε αυτό το παράδειγμα, θα δημιουργήσουμε δύο στήλες με διαφορετικό πλάτος:
Παράδειγμα
.στήλη { παράθεση: αριστερά; } .αριστερή { πλάτος: 25%; } .δεξιά { πλάτος: 75%; }
Σε αυτό το παράδειγμα, θα δημιουργήσουμε ένανΛειτουργικότηταΔίπολη Στήλη:
Παράδειγμα
/* Λειτουργικό Σχέδιο Εφαρμοσμένης Διαδικτυακής Σχεδίασης - Όταν το πλάτος οθόνης είναι κάτω από 600px, τα δύο στήλες θα συγχωνεύονται, αντί να παραμένουν παράλληλες */ @media screen and (πλάτος-μαξ: 600px) { .στήλη { πλάτος: 100%; } }
Συμπεριλαμβανόμενες Σελίδες
Εκμάθηση:CSS Σχεδιασμός ιστοσελίδας
- Προηγούμενη σελίδα Λήψη στοιχείου iframe
- Επόμενη σελίδα Διάταξη τριών στήλων