Visualizzazione dei risultati da 1 a 4 su 4

Discussione: blocco di immagini

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    433

    blocco di immagini

    In una pagina ho dei blocchi di testo (semplici <p>),
    poi devo inserire in sequenza delle piccole immagini flottanti a sinistra.
    Dopo le immagini, dovrebbe ripartire il testo,
    che invece si infila di lato alle immagini.
    Come posso delimitare un blocco, un <div>, perché contenga dinamicamente
    le immagini e quindi il flusso del testo riprenda a capo?

    TESTO TESTO TESTO
    immagine immagine immagine immagine immagine immagine
    TESTO TESTO TESTO
    Attualmente io ho
    codice:
    <p>testo testo testo testo testo</p>
    <img class="picleft" src="pics/pic01.jpeg" />
    <img class="picleft" src="pics/pic02.jpeg" />
    <img class="picleft" src="pics/pic3.jpeg" />
    <p>testo testo testo testo testo</p>
    e nel CSS molto semplicemente
    codice:
    .picleft{float:left; text-align:right; padding:1em 2em 1em 0}
    In altre parole, vorrei poter delimitare un blocco di immagini
    tenendolo separato dalla disposizione del testo

    grazie
    m

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    162
    si potrebbe fare in modi diversi ma ottenendo lo stesso risultato, uno creando un elemento che vada a cancellare il float, l'altro raggruppando le immagini in un elemento in flexbox.

    codice:
    <p>testo testo testo testo testo</p>
            <img class="picleft" src="pics/pic01.jpeg" />
            <img class="picleft" src="pics/pic02.jpeg" />
            <img class="picleft" src="pics/pic3.jpeg" />
            <div style="clear: left;"></div>  
        <p>testo testo testo testo testo</p>
    
        <p>testo testo testo testo testo</p>
        <div id="img-line" style="display: flex;">
            <img class="picleft" src="pics/pic01.jpeg" />
            <img class="picleft" src="pics/pic02.jpeg" />
            <img class="picleft" src="pics/pic3.jpeg" />
        </div>    
        <p>testo testo testo testo testo</p>

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,907
    Dal momento che le immagini sono flottanti si comportano come degli oggetti immersi in un liquido, per tale motivo ottieni quel comportamento.

    In linea di massima ci sono due principali soluzioni.
    Puoi applicare clear:left (o clear:both) all'elemento che segue quelle immagini, in modo che da quel punto sia interrotto l'effetto flottante:

    codice:
    <p>testo testo testo testo testo</p>
    <img class="picleft" src="img/led.png" />
    <img class="picleft" src="img/led.png" />
    <img class="picleft" src="img/led.png" />
    <p style="clear:left">testo testo testo testo testo</p>
    In alternativa puoi racchiudere le immagini in un contenitore (un div, come hai accennato tu stesso) al quale applichi la proprietà overflow:auto, così che l'effetto flottante sia confinato entro i limiti del div stesso e di ciò che contiene:
    codice:
    p>testo testo testo testo testo</p>
    <div style="overflow:auto">
       <img class="picleft" src="img/led.png" />
       <img class="picleft" src="img/led.png" />
       <img class="picleft" src="img/led.png" />
    </div>
    <p>testo testo testo testo testo</p>


    EDIT: pardon, ninja72 mi ha anticipato, è stato troppo veloce
    Ultima modifica di KillerWorm; 19-03-2021 a 23:41
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    433
    perfetto, davvero grazie a entrambi
    m

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 © 2021 vBulletin Solutions, Inc. All rights reserved.