Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    43

    Gestione responsive di 6 immagini a coppie

    Non sono per niente un web designer avanzato, ma per poche immagini sto cercando una soluzione in autonomia.

    In questa pagina Ho messo sei piccole immagini 200x100 a coppie in una tabella. Tra l'altro l'avrei evitata volentieri, mi sa di obsoleto, ma non avrei saputo crearla solo con i CSS.

    Sull'iphone sembra che sia responsive. Ma non so se questa soluzione lo sarà su display di diverse risoluzioni e dimensioni.


    codice HTML:
    <div align="center">
    <table border="0" cellspacing="10" cellpadding="10">
    <tbody>
    <tr>
    <th>Prima</th><th>Dopo</th></tr>
    <tr>
    <td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-1.jpg" alt="" /></td>
    <td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-1.jpg" alt="Lumineers dopo caso 1" /></td>
    </tr>
    <tr>
    <td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-2.jpg" alt="" /></td>
    <td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-2.jpg" alt="Lumineers dopo caso 2" /></td>
    </tr>
    <tr>
    <td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-3.jpg" alt="" /></td>
    <td><img src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-3.jpg" alt="Lumineers dopo caso 3" /></td>
    </tr>
    </tbody>
    </table>
    </div>
    Come l'avreste gestita?

    Grazie
    Ciao

  2. #2
    codice:
    <style type="text/css">.ts-1 {
        border: none;
        height: auto;
        text-align: left;
        width: auto;
    }
    
    .ts-1-1 {
        border: none;
        display: inline;
        float: left;
        height: 7.81%;
        line-height: 36px;
        margin-left: 10px;
        margin-top: 10px;
        padding: 1px;
        text-align: center;
        width: 46.38%;
    }
    
    .ts-1-3 {
        border: none;
        display: inline;
        float: left;
        height: 24.51%;
        margin-left: 10px;
        margin-top: 10px;
        padding-bottom: 1px;
        padding-left: 1px;
        padding-right: 1px;
        padding-top: 10px;
        width: 46.38%;
    }
    
    .gen-1 {
        clear: both;
    }
    </style>
    -------------------------------------------------------------------------------
            
            <div align="center">
                
                <div class="ts-1">
                    <div class="ts-1-1">Prima</div>
                    <div class="ts-1-1">Dopo</div>
                    <div class="ts-1-3"><img alt="" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-1.jpg"></div>
                    <div class="ts-1-3"><img alt="Lumineers dopo caso 1" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-1.jpg"></div>
                    <div class="ts-1-3"><img alt="" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-2.jpg"></div>
                    <div class="ts-1-3"><img alt="Lumineers dopo caso 2" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-2.jpg"></div>
                    <div class="ts-1-3"><img alt="" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-prima-3.jpg"></div>
                    <div class="ts-1-3"><img alt="Lumineers dopo caso 3" src="http://www.giuseppearcidiacono.it/wp-content/uploads/2015/12/lumineers-dopo-3.jpg"></div>
                    <div class="gen-1"></div>
                </div>
                
            </div>
    “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

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.