[HTML] Allineamento immagine agli angoli inferiori di un div

Discussione in 'HTML e CSS' iniziata da EditAlex, 13 Settembre 2018.

  1. EditAlex

    EditAlex Nuovo Utente

    Registrato:
    13 Settembre 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Salve a tutti,
    ho un problema sperando di poter risolvere attraverso questo forum.
    Ho la necessità di posizionare un immagine all'interno di un tag DIV ai quattro angoli di questi,
    allego un immagine per esprimere meglio il concetto
    Allineamento.jpg
    Posizionando l'immagine in cima e utilizzando il codice css "float" il problema non esiste poiché l'immagine si adatta a destra o a sinistra del DIV e il testo scorre attorno,
    fin qui tutto ok,
    il problema è l'allineamento in basso a SX e in basso a DX non so come posizionarli,
    ho provato con float:left; margin-top: 300px; per abbassare la foto, ma il testo non scorre più attorno all'immagine.
    Accetto qualsiasi consiglio, se con HTML e CSS non si può fare consigliatemi se è possibile farlo con altri linguaggi (javascript, ecc)
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        margin: 0;
        padding: 0;
        border: 2px #000000 solid;
        width: 880px;
        height: 540px;
    }
    .img {
        width: 400px;
        height: 220px;
        float: left;
        margin: 20px;
        padding: 0;
      
    }
    img {
        float: left;
        margin: 0 10px 10px 0;
    }
    </style>
    </head>
    
    <body>
    <div id="contenitore">
      <div class="img">
          <img src="mo.jpg" width="200" height="150" alt=""/>
        <p class="testo">
            « Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
        </p>
      </div>
      <div class="img">
          <img src="mo.jpg" width="200" height="150" alt=""/>
        <p class="testo">
            « Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
        </p>
      </div>
      <div class="img">
          <img src="mo.jpg" width="200" height="150" alt=""/>
        <p class="testo">
            « Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
        </p>
      </div>
      <div class="img">
          <img src="mo.jpg" width="200" height="150" alt=""/>
        <p class="testo">
            « Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
        </p>
      </div>
    </div>
    </body>
    </html>
    01.jpg
     
    Ultima modifica: 13 Settembre 2018
  3. EditAlex

    EditAlex Nuovo Utente

    Registrato:
    13 Settembre 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Grazie Max 1 per la risposta veloce, ma credo che il mio problema è un altro e forse l'ho esposto in maniera non corretta:
    ho un solo contenitore DIV con del testo al suo interno, solo UNA foto devo riuscire a posizionare, a volte in basso a destra oppure in basso a sinistra ecc.
    Allego un'altra immagine sperando che sia chiarificatrice. esempio_corretto.jpg
     
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    A destra o a sinistra! Una volta di qua e una volta di la non si fa!
     
  5. EditAlex

    EditAlex Nuovo Utente

    Registrato:
    13 Settembre 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Per facilitare la cosa,
    mi serve sapere se è possibile fare come nella foto allegata?
    Solo in basso a destra con testo che scorre attorno.
    Praticamente mi servirebbe una sorta di float verticale che non esiste.
     
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Per farlo ci vuole un contenitore che contenga il testo e l'immagine da spostare dove vuoi. Altrimenti bisogna fare una cosa schifosa con dei posizionamenti assoluti
     
  7. EditAlex

    EditAlex Nuovo Utente

    Registrato:
    13 Settembre 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    I posizionamenti assoluti li ho provati e sono veramente cosa “schifosa”. Hai degli esempi da postare per capire a livello di codice come fare?
     
  8. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Per cosa? Per i posizionamenti assoluti? Con questi perdi ogni possibilità di visione con risoluzioni diverse
     
  9. EditAlex

    EditAlex Nuovo Utente

    Registrato:
    13 Settembre 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    No mi riferivo alla prima parte del tuo messaggio precedente.
     
  10. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Ti ho preparato una DEMO
     
  11. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Posso cancellare la DEMO? La hai vista?
     
  12. EditAlex

    EditAlex Nuovo Utente

    Registrato:
    13 Settembre 2018
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Si, grazie.
     
  13. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.320
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Hai risolto? Come?
     
Sto caricando...

Condividi questa Pagina