[HTML] Allineamento immagine agli angoli inferiori di un div

E

EditAlex

Nuovo Utente
13 Set 2018
7
0
1
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)
 
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:
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
 
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.
 
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
 
I posizionamenti assoluti li ho provati e sono veramente cosa “schifosa”. Hai degli esempi da postare per capire a livello di codice come fare?
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
[HTML] consiglio su label e checkbox riguardo l'allineamento
Risposte
3
Visite
5K
HTML e CSS
|$Alessandro$|
|$Alessandro$|
C
[HTML] Stampo contenuto di una variabile in TEXTAREA allineamento
Risposte
1
Visite
2K
HTML e CSS
colomber
C
F
[HTML] Allineamento in un TD
Risposte
2
Visite
2K
HTML e CSS
Francesco_72
F
M
Allineamento Testo html css, help
Risposte
1
Visite
2K
HTML e CSS
marekiaro
M
S
Creare un bollettino postale in html o altro linguaggio
Risposte
2
Visite
2K
HTML e CSS
salvo_76
S
M
variabile javascript su link html
Risposte
5
Visite
2K
Javascript
mizar1966
M
G
Pagina html in stringa
Risposte
2
Visite
2K
PHP
Fra_23
F
E
Sostituzione Elemento Html
Risposte
3
Visite
2K
PHP
WmbertSea
WmbertSea
G
Elementi HTML
Risposte
1
Visite
1K
HTML e CSS
Alex Mercer
A
K
Visualizzare del html responsive in una Webview
Risposte
0
Visite
2K
Sviluppo app per Android
klomax
K
T
Domanda valutazione html LinkedIn 2022 pt3
Risposte
7
Visite
975
HTML e CSS
tonyparco22
T
T
Domanda valutazione html LinkedIn 2023 pt2
Risposte
16
Visite
2K
HTML e CSS
tenusiajob
T
T
Domanda valutazione html LinkedIn 2023 pt1
Risposte
1
Visite
543
HTML e CSS
WmbertSea
WmbertSea
MarcoGrazia
Salvataggio HTML in database
Risposte
2
Visite
905
PHP
MarcoGrazia
MarcoGrazia
K
posizionare variabile da pagina html all'iframe.
Risposte
1
Visite
964
Javascript
WmbertSea
WmbertSea
peppe0703
Come Estrarre dati da db wordpress e richiamarli in html esterno
Risposte
0
Visite
2K
HTML e CSS
peppe0703
peppe0703
L
problema collegamento file css con html
Risposte
1
Visite
1K
HTML e CSS
WEBLEADERS
W
D
Informazioni da XAMPP su HTML
Risposte
0
Visite
849
PHP
dalianaa
D
R
Immagini html
Risposte
2
Visite
2K
HTML e CSS
GraphicBoy
G
K
File audio in html, chi mi può aiutare?
Risposte
0
Visite
1K
HTML e CSS
K5$
K
Alto Basso