CSS Πολυσυνοριακή Σύνταξη

Το CSS multi-column layout

Το CSS multi-column layout μας επιτρέπει να καθορίσουμε εύκολα πολλαπλά κείμενα σε στήλες - όπως μια εφημερίδα:

Η αφήγηση των τριών βασιλείων

Η πρώτη φορά
Στο γεύμα του Γιουαντάν, οι ήρωες συνδέθηκαν με τρία δεσμεύσεις.
Διασκόπησε τον ήρωα του Κουανγκτσίν και κατέστησε τον πρώτο του.
Κατά την κατάσταση του κόσμου, όταν είναι διαμερισμένος, θα συγχωνευτεί, και όταν συγχωνευτεί, θα διαμεριστεί: στο τέλος της δυναστείας των Τζου, οι έβδομοι κράτη διεκδικούσαν, και εντάχθηκαν στον Τσιν; και μετά την εξαφάνιση του Τσιν, οι Τσου και οι Χαν διεκδικούσαν, και ξανά εντάχθηκαν στον Χαν; Η δυναστεία των Χαν από τον αυτοκράτορα Γκοουγκου που σκότωσε το αβγό της γοργόνα και ξεκίνησε την εξέγερση, εξέτασε τον κόσμο, αργότερα ο Γουανγκου ανασήκωσε την δυναστεία, truyềnθηκε στον αυτοκράτορα Σιάνγκ, και στη συνέχεια διασπάστηκε σε τρία κράτη. Αν αναλύσουμε την αιτία της παρακμής, φαίνεται ότι ξεκίνησε από τους αυτοκράτορες Χουανγκ και Λινγκ. Ο αυτοκράτορας Χουανγκ禁锢善类，崇信宦官. και όταν ο αυτοκράτορας Χουανγκ πέθανε, ο αυτοκράτορας Λινγκ ανέβηκε στον θρόνο, ο στρατηγός Νουου, ο διδάσκαλος Τσεν Φαν, τον βοήθησαν να κυβερνήσει; τότε υπήρχαν宦官 όπως ο Κοου Τζιου που ασκούσαν την εξουσία, ο Νουου και ο Τσεν Φαν σχεδίαζαν να τους δολοφονήσουν, αλλά η υπόθεση δεν ήταν σφραγισμένη, αντίθετα, αυτοί είχαν αποτύχει, και οι στενοί σύμβουλοι έγιναν ακόμα πιο δυνατοί. Στις 15 Απριλίου του έτους Τζιάννιγκ, ο αυτοκράτορας βρέθηκε στο Θερμόντε Ρέντα. Κάθισε στην καρέκλα, και μια τρελή βροχή ξέσπασε από το γωνία του δώματος. Μια μεγάλη πράσινη зміη πέταξε από το ράφι, έγινε στροφή στην καρέκλα. Ο αυτοκράτορας τρομοκράτησε, οι άνθρωποι γύρω του τον βοήθησαν να επιστρέψει στο παλάτι, οι αξιωματούχοι έτρεξαν να αποφύγουν. Μέχρι την επόμενη στιγμή, η зміη εξαφανίστηκε. Μια μεγάλη χαρά και βροχή ξέσπασε ξαφνικά, με βροχή και χιονί, μέχρι τη μεσάνυχτα. Απέκτησε πολλά σπίτια. Το έτος Τζιάννιγκ, το Λογκανγκ σεισμώθηκε; και η θάλασσα εξαφανίστηκε, οι κάτοικοι της ακτής, όλοι τους πήραν τα κύματα στο κόλπο. Το έτος Κάιου, μια γαλοκίτη μετατράπηκε σε αρσενικό. Στις 6 Ιουνίου, ένα μαύρο σύννεφο 10-20 μέτρων πήρε πτήση στο Θερμόντε Ρέντα. Στις 7 Σεπτεμβρίου, ένα κόκκινο φαινόμενο εμφανίστηκε στο Ζουτάνγκ, οι όχθες του Πεντάι ανήλθαν. Όλα αυτά τα κακά, δεν είναι μόνο ένα. Ο αυτοκράτορας εξέδωσε διάταγμα για να ρωτήσει τους αξιωματούχους για τις αιτίες των καταστροφών, ο διάκονος Τσάι Γιου πρότεινε να είναι η αιτία η γυναίκα που ασκούσε την εξουσία, οι λέξεις ήταν πολύ ευθύτες. Ο αυτοκράτορας, αφού είδε το κείμενο, ανέπνευσε, και ξεκίνησε να αλλάξει ρούχα. Ο Κοου Τζιου, που βρισκόταν πίσω, τον παρατήρησε, και ανακοίνωσε σε όλους τους γύρω του; και έτσι τον κατηγόρησε για άλλα θέματα, τον έστειλε πίσω στο χωριό. Μετά τον Ζανγκ Λιάνγκ, τον Ζανγκ Τζουνγκ, τον Φενγκ Μου, τον Τζιου Γουάνγκ, τον Κοου Τζιου, τον Χουανγκ Λιάνγκ, τον Σιαν Σου, τον Τσενγκ Σου, τον Χαϊνγκ Σου, τους δέκα ανθρώπους που έκαναν συμμαχία για να είναι κακοί, ονομάστηκαν "Δέκα συνεχείς υπηρεσίες". Ο αυτοκράτορας έλαβε την εμπιστοσύνη του Ζανγκ Λιάνγκ, τον κάλεσε "Αφού". Η πολιτική της ημέρας γίνεται κακή, και ο κόσμος σκέφτεται να εξεγερθεί, οι ληστές ξέσπασαν.

...... ......

CSS ιδιότητες πολλαπλών στηλών

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Σε αυτή την ενότητα, θα μάθετε τις παρακάτω ιδιότητες πολλαπλών στηλών:

Υποστήριξη προγράμματος περιήγησης

Ιδιότητα Τα αριθμήματα στην τаблицή δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS δημιουργία πολλαπλών στηλών

Η ιδιότητα ορίζει τον αριθμό των στηλών που θα διαχωριστούν το στοιχείο.

Παράδειγμα

div {
  Το παρακάτω παράδειγμα διαιρεί το κείμενο στο εσωτερικό του στοιχείου <div> σε 3 στήλες:
}

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

column-count: 3;

column-gap CSS καθορισμός διαστήματος μεταξύ στηλών

Η ιδιότητα ορίζει το διάστημα μεταξύ των στηλών.

Παράδειγμα

div {
  Το παρακάτω παράδειγμα ορίζει ότι το διάστημα μεταξύ των στηλών πρέπει να είναι 40 pixels:
}

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

column-gap: 40px;

column-rule-style CSS κανόνες στηλών

Παράδειγμα

div {
  Η ιδιότητα ορίζει τον τύπο της γραμμής μεταξύ των στηλών:
}

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

column-rule-width column-rule-style: solid;

Παράδειγμα

div {
  Η ιδιότητα ορίζει το πλάτος της γραμμής μεταξύ των στηλών:
}

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

column-rule-color column-rule-width: 1px;

Παράδειγμα

div {
  Η ιδιότητα ορίζει το χρώμα της γραμμής μεταξύ των στηλών:
}

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

Η ιδιότητα column-rule είναι η συντομευμένη ιδιότητα για να ρυθμίσει όλες τις column-rule-*.

Το παρακάτω παράδειγμα ρυθμίζει το πλάτος, τον τύπο και το χρώμα της γραμμής μεταξύ των στηλών:

Παράδειγμα

div {
  column-rule: 1px solid lightblue;
}

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

Ορισμός του αριθμού των στηλών που θα διασχίσει το στοιχείο

column-span Η ιδιότητα ορίζει πόσα στήλες θα διασχίσει το στοιχείο.

Το παρακάτω παράδειγμα ορίζει ότι το στοιχείο <h2> πρέπει να διασχίσει όλες τις στήλες:

Παράδειγμα

h2 {
  column-span: all;
}

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

Ορισμός πλάτους στήλης

column-width Η ιδιότητα ορίζει την προτεινόμενη μέγιστη πλάτος της στήλης.

Το παρακάτω παράδειγμα ορίζει ότι η προτεινόμενη μέγιστη πλάτος της στήλης πρέπει να είναι 100px:

Παράδειγμα

div {
  column-width: 100px;
}

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

CSS ιδιότητες πολλαπλών στηλών

Η παρακάτω τаблицή περιλαμβάνει όλες τις ιδιότητες πολλαπλών στηλών:

Ιδιότητα Περιγραφή
column-count Ορίζει τον αριθμό των στηλών που θα διαχωριστούν το στοιχείο.
column-fill Ορίζει πώς θα γεμίσουν οι στήλες.
column-gap Ορίζει το διαστήματα μεταξύ των στηλών.
column-rule Χρησιμοποιείται για να ρυθμίσει την συντομευμένη ιδιότητα όλων των column-rule-*.
column-rule-color Ορίζει τον χρώμα της γραμμής μεταξύ των στηλών.
column-rule-style Ορίζει τον τύπο της γραμμής μεταξύ των στηλών.
column-rule-width Ορίζει την πλάτος της γραμμής μεταξύ των στηλών.
column-span Ορίζει πόσες στήλες θα πρέπει να διασχίσει ένα στοιχείο.
column-width Ορίζει την προτεινόμενη καλύτερη διάσταση για τις στήλες.
columns Σύντομη ιδιότητα για τη ρύθμιση column-width και column-count.