Naformátování bloku text s obrázkem

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Odpovědět
Uživatelský avatar
belier
Level 1
Level 1
Příspěvky: 98
Registrován: 25 úno 2011 13:36
Bydliště: R.p.R
Kontaktovat uživatele:

Naformátování bloku text s obrázkem

Příspěvek od belier »

Zdravím,

potřeboval bych naformátovat více bloků textu tímto způsobem:

Vlevo je obrázek, který má pod sebou popisek. Vedle ho obtéká text, který ale není na celou výšku obrázku, proto je potřeba jej zarovnat do středu výšky obrázku tak, aby byla shora i zespodu stejná mezera. Aktuálně jsem to prostě odbreakoval, ale to není řešení v dalších zařízeních. Viz příloha.

Zatím jsem měl jeden div floatnutý doleva, ten držel obrázek vlevo a dalším vnořeným divem jsem držel vlevo popisek fotky. Otázka tedy je, jak ještě dostat doprava blok textu a vycentrovat jej dle výšky obrázku. :wtf:
Přílohy
blok.png
blok.png (6.77 KiB) Zobrazeno 414 x
Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6991
Registrován: 11 dub 2006 09:09
Bydliště: Praha

Re: Naformátování bloku text s obrázkem

Příspěvek od Myloš »

Pokud znáš výšku obrázku, je to jednoduché, například takhle:
http://pokusna-krysa.webpark.cz/tmp/ver ... e_obrazku/
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)
Uživatelský avatar
belier
Level 1
Level 1
Příspěvky: 98
Registrován: 25 úno 2011 13:36
Bydliště: R.p.R
Kontaktovat uživatele:

Re: Naformátování bloku text s obrázkem

Příspěvek od belier »

Díky, tak lehké to u mě ale nebude, přesné rozměry obrázku sice znám, ale problém je v tom, že v mobilní verzi se obrázek zmenšuje a tím pádem nemůžu nastavit pevnou šířku (potom by na mobilu obrázek zasahoval za okraj).
myliny
Level 1
Level 1
Příspěvky: 93
Registrován: 28 říj 2014 11:25

Re: Naformátování bloku text s obrázkem

Příspěvek od myliny »

možná to jde pomocí tabulky (nezatracovat tabulky), případně pomocí display: property může mít exotické hodnoty table-cell apod.
Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6991
Registrován: 11 dub 2006 09:09
Bydliště: Praha

Re: Naformátování bloku text s obrázkem

Příspěvek od Myloš »

No vždyť jsem tam ten pravý blok nadefinoval jako display:table-cell s hodnotou vertical-align:middle. Na tom nevidím nic exotického.
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)
Odpovědět

Zpět na „Programování a tvorba webu“