Σχεδιασμός Σελίδας CSS - Παράδειγμα Αναστροφής

Η σελίδα αυτή παρέχει κοινά παραδείγματα float.

Grid / Πλαίσια ίσου πλάτους

Box 1
Box 2
Box 1
Box 2
Box 3

Με τη χρήση float Η ιδιότητα, μπορεί να χρησιμοποιηθεί για να δημιουργήσετε εύκολα παράλληλα float κουτί:

Παράδειγμα

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Τρία πλαίσια (τέσσερα πλαίσια χρησιμοποιούν 25%, δύο πλαίσια χρησιμοποιούν 50%, κ.λπ.) */
  padding: 50px; /* Αν χρειάζεται να προσθέσετε απόσταση μεταξύ των εικόνων */
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Τι είναι το box-sizing;

Μπορείτε να δημιουργήσετε εύκολα τρία float κουτί παράλληλα. Ωστόσο, όταν προσθέτετε περιεχόμενο για να επεκτείνετε το πλάτος κάθε κουτιού (π.χ. περιθώριο ή όρια), το κουτί θα καταστραφεί. box-sizing Η ιδιότητα επιτρέπει να συμπεριλάβουμε το περιθώριο και τα όρια στο συνολικό πλάτος (και ύψος) του κουτιού, διασφαλίζοντας ότι το περιθώριο παραμένει στο κουτί χωρίς να σπάσει.

Μπορείτε να βρείτε στη CSS Box Sizing Σε αυτό το κεφάλαιο μάθετε περισσότερα για την ιδιότητα box-sizing.

Παράλληλη εμφάνιση εικόνων

Αυτό το δίκτυο πλαισίων (The grid of boxes) μπορεί επίσης να χρησιμοποιηθεί για παράλληλη εμφάνιση εικόνων:

Παράδειγμα

.img-container {
  float: left;
  width: 33.33%; /* Τρία πλαίσια (τέσσερα πλαίσια χρησιμοποιούν 25%, δύο πλαίσια χρησιμοποιούν 50%, κ.λπ.) */
  padding: 5px; /* Αν χρειάζεται να προσθέσετε απόσταση μεταξύ των εικόνων */
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Πλαίσια ίσου πλάτους

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

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Παράδειγμα

.box {
  height: 500px;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Ωστόσο, αυτό χάνει την ευελιξία. Αν μπορείτε να διασφαλίσετε ότι πάντα θα υπάρχουν ίσα ποσά περιεχομένου στον κουτί, αυτό είναι καλό. Αλλά συχνά, το περιεχόμενο είναι διαφορετικό. Αν δοκιμάσετε το παράδειγμα στην κινητή συσκευή, θα δείτε ότι το περιεχόμενο του δεύτερου κουτιού εμφανίζεται εκτός του κουτιού. Αυτό είναι το σημείο που το CSS3 Flexbox παίζει ρόλο - γιατί μπορεί να επεκτείνει αυτόματα το κουτί ώστε να είναι ίσο με το μακρύτερο κουτί:

Παράδειγμα

Δημιουργία ευελιξίας χρησιμοποιώντας το Flexbox:

Box 1 - Αυτό είναι κάτι κείμενο για να διασφαλιστεί ότι το περιεχόμενο είναι πραγματικά υψηλό. Αυτό είναι κάτι κείμενο για να διασφαλιστεί ότι το περιεχόμενο είναι πραγματικά υψηλό. Αυτό είναι κάτι κείμενο για να διασφαλίσει ότι το περιεχόμενο είναι πραγματικά υψηλό. Αυτό είναι κάτι κείμενο για να διασφαλίσει ότι το περιεχόμενο είναι πραγματικά υψηλό. Αυτό είναι κάτι κείμενο για να διασφαλίσει ότι το περιεχόμενο είναι πραγματικά υψηλό.
Box 2 - Η ύψος μου θα ακολουθήσει το Box 1.

Προσπαθήστε να το δοκιμάσετε προσωπικά

Το μοναδικό πρόβλημα με το Flexbox είναι ότι δεν λειτουργεί στις εκδόσεις του Internet Explorer 10 ή παλιότερες. Μπορείτε να βρείτε τα παραδείγματα μας CSS Flexbox Μάθετε περισσότερα για το μοντέλο Flexbox στο κεφάλαιο.

Μενού πλοήγησης

Μεταφορά float Χρήση μαζί με τη λίστα των υπερσυνδέσμων για τη δημιουργία ενός οριζόντιου μενού:

Παράδειγμα

Προσπαθήστε να το δοκιμάσετε προσωπικά

Παράδειγμα πλοήγησης Web

Χρήση float Η χρήση του προτύπου για την ολοκλήρωση της πλοήγησης του entire Web επίσης είναι συχνή:

Παράδειγμα

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Περισσότερες παραδείξεις

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

Όλες οι CSS μεταβλητές πτήσης

Πρότυπο Περιγραφή
box-sizing Καθορισμός της μέθοδου υπολογισμού του πλάτους και της ύψους του στοιχείου: αν πρέπει να περιλαμβάνονται τα εσωτερικά περιθώρια και τα ούρα.
clear Καθορίζει ποια στοιχεία μπορούν να επιπλέουν δίπλα στο στοιχείο που καθαρίζεται και από ποια πλευρά.
float Καθορίζει πώς θα επιπλέει το στοιχείο.
overflow Καθορίζει τι θα συμβεί αν το περιεχόμενο υπερβεί το πλαίσιο του στοιχείου.
overflow-x Καθορίζει πώς θα χειριστεί το περιεχόμενο της περιοχής που υπερβαίνει το περιθώριο του στοιχείου όταν το περιεχόμενο υπερβαίνει το περιθώριο του στοιχείου.
overflow-y Καθορίζει πώς θα χειριστεί το περιεχόμενο της περιοχής που υπερβαίνει το περιθώριο του στοιχείου όταν το περιεχόμενο υπερβαίνει το περιθώριο του στοιχείου.