Visualizzazione dei risultati da 1 a 10 su 10

Hybrid View

  1. #1
    Una tabella a tre colonne non si ridurrà mai a 1 colonna automaticamente.
    Senza seguire tutte le regole del responsive puoi mettere le immagini e il relativo testo dentro a dei div (una per div) dandogli un float:left in modo da affiancarne tre, riducendo la risoluzione i div seguiranno il flusso della pagina e andranno a capo come vuoi tu
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    38
    Quote Originariamente inviata da carlomarangoni Visualizza il messaggio
    Una tabella a tre colonne non si ridurrà mai a 1 colonna automaticamente.
    Senza seguire tutte le regole del responsive puoi mettere le immagini e il relativo testo dentro a dei div (una per div) dandogli un float:left in modo da affiancarne tre, riducendo la risoluzione i div seguiranno il flusso della pagina e andranno a capo come vuoi tu
    Grazie, mi hai aperto un po' la mente.

    Ho cercato e creato questo:

    codice:
    <div id="container">
    <ul id="griglia">
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0006-0001.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-BS-0000.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/D0-110.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0001.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0000.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/D0-032017.JPG"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0001.jpg"></li>
    </ul>
    </div>
    con css:
    codice:
    #griglia > li {
      border: 2px solid #333333;
      display: inline-block;
      width:  160px;
      height: 160px;
      margin: 10px;
      background-color: #abe2ff;
    }
    #container {
        background: #e3e3e3;
        max-width:850px;
        margin:0 auto;
        padding: 20px;
        text-align: center;
    }
    Trovo solo una difficoltà, che è quella che non riesco a dare uno spazio tra le righe che si creano, lo spazio sta solo fra immagine in orizzontale, ma non in verticale, secondo me c'è un conflitto con il css del sito, potete aiutarmi?

    THX
    Ultima modifica di Vincent.Zeno; 12-12-2017 a 12:32 Motivo: correzione formattazione

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.