| Autor | Zpráva | ||
|---|---|---|---|
| skrofa Profil |
#1 · Zasláno: 22. 1. 2017, 19:59:03
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 |
#2 · Zasláno: 23. 1. 2017, 00:48:56
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 |
#3 · Zasláno: 23. 1. 2017, 18:50:44
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í. |
||
|
Časová prodleva: 7 let
|
|||
0