Πώς να τοποθετήσετε παράλληλα εικόνες

Μάθετε πώς να τοποθετήσετε παράλληλα εικόνες με CSS.

Πώς να τοποθετήσετε τις εικόνες παράλληλα

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

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Βήμα 2 - Προσθήκη CSS:

Πώς να χρησιμοποιήσετε το CSS float Αντικειμενικά χαρακτηριστικά δημιουργίας παράλληλων εικόνων:

Παράδειγμα Πήξης

/* Τρεις τοποθεσίες εικόνων (چهρεις τοποθεσίες εικόνων χρησιμοποιούν 25%, δύο τοποθεσίες εικόνων χρησιμοποιούν 50%, κ.λπ.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Καθαρισμός της κενούς τοποθεσίας μετά το πήξιμο */
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

Πώς να χρησιμοποιήσετε το CSS flex Αντικειμενικά χαρακτηριστικά δημιουργίας παράλληλων εικόνων:

Παράδειγμα Flexbox

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

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

Σημείωση:Το Flexbox δεν υποστηρίζει την Internet Explorer 10 και τις προηγούμενες εκδόσεις. Η επιλογή μεταξύ float ή flex για τη δημιουργία τριών στήλων εξαρτάται από εσάς. Ωστόσο, αν χρειάζεστε υποστήριξη για την IE10 και τις προηγούμενες εκδόσεις, θα πρέπει να χρησιμοποιήσετε το float.

Συμβουλή:Για περισσότερες πληροφορίες σχετικά με το μονάδος ευελιξίας διάταξης, παρακαλώ διαβάστε το Εκμάθηση CSS Flexbox.

Προσθήκη Απάνταχθης Δύναμης

Ή μπορείτε να προσθέσετε εξετάσεις μέσων για να παρατάξουν τις εικόνες σε συγκεκριμένες πλάτη οθόνης αντί να παρατίθενται παράλληλα.

Το παρακάτω παράδειγμα θα παρατάξει τις εικόνες οριζόντια σε οθόνες με πλάτος 500px ή μικρότερο:

Παράδειγμα Απάνταχθης Διάταξης

/* Απάνταχθης διάταξη - Κάνει τα τρία στήλες να παρατίθενται σαν στρώματα αντί για παράλληλα */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

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

Για περισσότερες πληροφορίες σχετικά με τις εξετάσεις μέσων, παρακαλώ διαβάστε το Εκμάθηση CSS Μέσα Εξετάσεις.

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

Εκμάθηση:CSS εικόνα

Εκμάθηση:Εκμάθηση CSS Float

Εκμάθηση:CSS γκαλερί εικόνων