Domanda In che modo posso inserire le immagini in un formato simile alla griglia?


Ho circa 12-15 immagini che voglio allineare insieme in una griglia, con testo sotto ogni immagine. Ho pensato di usare un tavolo, ma ho sentito che i tavoli non sono il modo migliore per andare in questi giorni. Ho provato un paio di altre cose, ma niente sembrava funzionare come volevo.

Un esempio di ciò che voglio che assomigli sarebbe qualcosa di simile:

[----- Immagine -----] [----- Immagine -----] [----- Immagine -----] [----- Immagine ---- -] --- Riga 1

(--Descrizione-) (-Descrizione-) (-Descrizione-) (-Descrizione-)

[----- Immagine -----] [----- Immagine -----] [----- Immagine -----] [----- Immagine ---- -] --- Riga 2

(--Descrizione-) (-Descrizione-) (-Descrizione-) (-Descrizione-)

e così via...

Quali sono alcuni altri metodi, oltre alle tabelle, che dovrei esaminare usando? Eventuali suggerimenti o riferimenti sarebbero utili.


11
2018-04-01 18:36


origine


risposte:


HTML:

<div class = "floated_img">
    <img src = "img.jpg" alt = "Qualche immagine">
    <p> Descrizione dell'immagine precedente </ p>
</ Div>
<div class = "floated_img">
    <img src = "img2.jpg" alt = "Un'altra immagine">
    <p> Descrizione dell'immagine precedente </ p>
</ Div>

CSS:

.floated_img
{
    fluttuare: a sinistra;
}

Probabilmente vorrai qualche altro stile, ma quello dovrebbe fare sostanzialmente quello che vuoi.


9
2018-04-01 18:43



Un formato griglia? sembra un tavolo per me. Non c'è niente di sbagliato con le tabelle se le stai usando per qualcosa che in realtà è un tavolo.


1
2018-04-01 18:41



Dal momento che hai detto griglia, significa che l'altezza e la larghezza saranno corrette.

Un blocco in linea potrebbe funzionare molto bene per te. Trovo che siano un po 'più facili da lavorare rispetto ai galleggianti. E i blocchi in linea rispettano la proprietà di allineamento ereditata (quindi potresti averli centrati)

CSS

.grid_element {
  display: inline-block;
  width: 200px;
  height:200px;
  zoom: 1;         /* for IE */
  display*:inline; /* for IE */
}

Tuttavia, gli elementi inline-block potrebbero non funzionare così bene sui browser più vecchi.

Alcune letture:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html


0
2018-04-01 18:56