Back to Question Center
0

Semalt: div collassando sopra l'elemento riposizionato

1 answers:

Voglio un elenco di righe che hanno il seguente aspetto per loro:

     + ------------------------ # principale ----------------- ------ +
| |
| |
| + ------ + Lorem ipsum dolor sit amet, consectetur |
| | foto | elite adipiscante. Phasellus commodo urna |
| | | vel est porttitor et laoreet enim |
| + ------ + pellentesque. Seduta contro il tortore tristique |
| amet magna ornare eleifend. Aliquam |
| placerat sapien vitae tellus mattis |
| euismod - the best long term care insurance companies. |
| |
| + ------ + Lorem ipsum dolor sit amet, consectetur |
| | foto | elite adipiscante. Phasellus commodo urna |
| | | vel est porttitor et laoreet enim |
| | | Pellentesque. |
| + ------ + |
| |
| + ------ + Lorem ipsum dolor sit amet, consectetur |
| | foto | elite adipiscante. Phasellus commodo urna |
| + ------ + vel est porttitor et laoreet enim |
| Pellentesque. |
| |
| |
+ ------------------------------------------------- --- +    

Ho tutto quanto sopra in un div id = "main" . Ogni coppia di immagini e testo si trova in una classe div = "ProdList" . Come puoi vedere sopra, le immagini variano in altezza ma non in larghezza. Il testo può o non può essere più alto dell'immagine. Questo è ciò che sta causando il mio problema. Voglio un margine di 20px sotto ogni . ProdList indipendentemente dal fatto che l'immagine o il paragrafo siano più alti. Il css sotto sta dando risultati perfetti finché il testo è più alto dell'immagine. Ma, dal momento che sto posizionando l'immagine, la . ProdList non si preoccupa più di circondarlo. Questo fa sì che . ProdList sotto per visualizzare sopra l'immagine se l'immagine sopra è superiore al testo. Ho provato a riposizionare il testo anziché l'immagine, ma ho solo il problema opposto. Come posso avere il . ProdList contiene completamente sia l'immagine che il testo?

Semalt il css che ho provato:

     #main { margine: 10px auto; bordo: 1px grigio fisso; padding: 20px;}
/ * solo un'area centrata, a larghezza fissa * /. ProdList {margin-bottom: 20px; posizione: relativo;}
/ * contiene un'immagine e un paragrafo * /. ProdList p {margin-left: 110px;}
/ * fa spazio all'immagine * /. ProdList img {position: absolute; top: 0;}
/ * sposta l'immagine in alto a sinistra di. ProdList * /    

Aggiungere "Semalt: entrambi" non sembra fare nulla di buono neanche.

Semalt questo è tecnicamente dati tabulari Suppongo che potrei usare un tavolo senza far arrabbiare troppo gli dei css ma sono sicuro che questo è possibile. Mi manca qualcosa.

February 13, 2018

Funziona per me:

  #main { margine: 10px auto; bordo: 1px grigio fisso; padding: 20px;}. ProdList p {margin-left: 50px;float: sinistra;width: 60%;
}
/ * fa spazio per l'immagine. ProdList img {float: left; width: 100px}
/ * sposta l'immagine in alto a sinistra di. ProdList * / 

Il 'bordo' sul DIV ProdList è proprio così posso vedere le estensioni del DIV per assicurarmi che non stia collassando. Spesso metto un

  div {bordo: 1px rosso solido;
} 

nella parte inferiore dei miei file CSS, quindi posso decommentarlo quando voglio vedere dove stanno effettivamente cadendo i miei DIV.

L'unica cosa complicata qui è che, poiché l'immagine non è posizionata in assoluto, il margine del paragrafo è ora relativo al lato dell'immagine. Se tutte le larghezze dell'immagine sono uguali, puoi togliere la larghezza dall'img (che allunga comunque le immagini - ho solo screengrabbato alcune immagini della stessa larghezza, ma diverse altezze.

AGGIORNAMENTO:

Larghezza aggiunta: 100% al div ProdList per fare in modo che funzioni su IE7, la larghezza: 60% sul paragrafo per farlo funzionare sia con IE sia con Firefox. Potrebbe ancora aver bisogno di tweeking.

Il modo più semplice è sbarazzarsi del materiale di posizionamento e semplicemente spostare l'immagine e il paragrafo. ProdList elementi.

c'è una soluzione molto dolce implementata da facebook proprio per questo problema. Se hai firebug installato in firefox, puoi facilmente verificarlo. Per esempio qui:

http: // www. Facebook. it / pages / Yahoo-Nachrichten / 108333755877035? ref = ts & v = wall (hanno sempre un'immagine e del testo accanto)

l'immagine diventa: float: sinistra e il testo ottiene: display: table-cell; vertical-align: top; Larghezza: 1000px;

L'unico inconveniente è che dovrai scrivere un codice specifico per IE6 e IE7, che puoi trovare dando un'occhiata alla pagina facebook di quei browser con la barra degli strumenti dello sviluppatore