Autor Zpráva
skrofa
Profil
Jak docílit toho, aby text, který obtéká obrázek, se při nedostatku místa vedle obrázku zalomil pod obrázek?

Příklad:
Mám na stránce několik obrázků o různé velikosti (šířce). Obrázky mají nastaveno float: left. Stránka je široká např. 600 px.
Vedle obrázků, které mají šířku třeba 300 px je dostatek místa pro text a vše je v pořádku, ale pokud vložím obrázek široký 500 px, sloupec textu vedle obrázku je příliš úzký a v takovémto případě by se text měl zalomit až pod obrázkem.

Nevím, jak který obrázek bude široký, proto to nemůžu nastavovat jednotlivě, ale potřebuji nějaké automatické řešení. Něco jako min-width pro odstavec, jenže to nefunguje, protože to počítá celou šířku odstavce (i pod tím obrázkem).
Děkuji.
Davex
Profil
Mělo by jít zabrat místo těsně před textem neviditelným blokem s potřebnou minimální šířkou.
.img-caption:before {
  width: 101px;
  content: "";
  display: block;
  overflow: hidden;
}
skrofa
Profil
Davex:
Díky, něco podobného jsem už zkoušel, ale neměl jsem tam overflow: hidden, proto to nefungovalo. A ten prvek jsem vkládal přímo do html na začátek odstavce (uvnitř odstavce, ne před něj). Musel jsem nastavit display: inline-block, pak to fungovalo, ale zase to u širšího odstavce odsazovalo 1. řádek o šířku vloženého prvku. Tak jsem v html musel použít ještě odřádkování <br>. No prostě složitosti a jen jsem zasekával kód.

Takže tvůrci css na tento problém (úzký text vedle obrázku) vůbec nemysleli? Neexistuje žádná vlastnost, která by to řešila jednoduše a bez vkládání dalších prvků?
Radek9
Profil
skrofa:
Neexistuje žádná vlastnost, která by to řešila jednoduše a bez vkládání dalších prvků?
Vždyť tohle přesně Davexův kód dělá. Před odstavec vloží pseudo-element s potřebnou šířkou, takže se případně úzký odstavec zalomí.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: