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

Μάθετε πώς να δημιουργήσετε ένα δίπολο δίκτυο χρησιμοποιώντας 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 Σχεδιασμός ιστοσελίδας

Εκμάθηση:CSS Ωραισιά Εφαρμοσμένης Διαδικτυακής Σχεδίασης