float immagine fluida sinistra senza il testo a capo

Non c'è motivo per cui questo dovrebbe essere difficile da ottenere. Di nuovo nel modo in cui si poteva semplicemente creare un tavolo e mettere l'immagine sulla prima cella e il testo sul secondo. Facile come torta.float immagine fluida sinistra senza il testo a capo

Per qualche ragione io sto avendo un sacco di tempo ottenere questo a lavorare con i CSS, e so css abbastanza fluente. Sono sicuro che sto semplicemente trascurando una risposta che spero facile.

Quello che sto cercando di realizzare:

immagine

dinamica dimensioni (fuoriusciva dal database) flottato a sinistra - Descrizione testo a destra con lo spostamento di seguito un'immagine quando raggiunge l'altezza dell'immagine.

Cosa non funziona:

impostazione di un margin-left sul testo (larghezza dell'immagine non è coerente)
Impostazione larghezza/galleggiante proprio sul testo (ancora una volta, la larghezza dell'immagine è dinamico larghezza in modo corretto sul testo sarebbe sconosciuto)

Esempio codice (pre css):

<div class="demo"> 
    <img src="dynamic_sized_image.jpg" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div>

Speriamo che ci sia una risposta !!

Grazie!

fonte

2011-09-21 rkingon

Ecco la soluzione per il vostro problema (p { overflow: hidden})

http://jsfiddle.net/simoncereska/BnQRW/

fonte

2011-09-21 05:50:47 simoncereska

Holy Moly Non posso credere che sia così facile ... Sapevo che mi mancava qualcosa. Grazie mille .. Vorrei poter votare, ma ho bisogno di più punti rep =/ – rkingon

Salve, ehm, chiedendo per caso se potessi spiegare PERCHE 'funziona? Non ha davvero senso .. heh – rkingon

Questo funziona, ma non consente al testo di essere centrato verticalmente sull'immagine, o l'immagine di essere centrata verticalmente sul testo (a seconda di quale è più alta). È un vero peccato che l'unico modo per centrare in modo affidabile verticalmente le cose sia usare le tabelle. – cjbarth

Non credo sia possibile con puro css perché si dispone di un attributo dinamico.

utilizzare Javascript per calcolare la larghezza img, allora si può scoprire la larghezza del testo (a condizione che il contenitore #demo è una dimensione fissa). Impostare le larghezze via js e utilizzare questo css: http://jsfiddle.net/GcV3S/

fonte

2011-09-21 05:32:58 marissajmc

overflow: hidden è la risposta! Non posso credere che abbia funzionato ... – rkingon

quindi contrassegnalo come risposta corretta;) – simoncereska

Il modo più semplice e migliore è solo per impostare una dimensione fissa dell'immagine. Basta ridimensionarli, questa è la maggior parte dei casi per migliorare il layout e l'aspetto del tuo sito web. Se hai davvero bisogno di avere questo senza impostare una larghezza fissa per il blocco di testo o il blocco immagine, in realtà non so una risposta in questo momento, mi dispiace.

L'unico modo che posso pensare in questo momento sta usando javascript per modificare la larghezza del testo ... Tuttavia una domanda interessante.

fonte

2011-09-21 05:45:12 JNDPNT

Stavo discutendo usando java - o persino memorizzando la larghezza dell'immagine in cms quindi fornisci in linea css ... comunque sembra che ci sia un modo ... overflow: hidden; sul testo ha funzionato! – rkingon

float immagine fluida sinistra senza il testo a capo

risposta

Problemi correlati