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

Uživatelský avatar
belier
Level 1
Level 1
Příspěvky: 98
Registrován: únor 11
Bydliště: R.p.R
Pohlaví: Muž
Stav:
Offline
Kontakt:

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

Příspěvekod belier » 03 lis 2014 09:33

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 355 x

Reklama
Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

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

Příspěvekod Myloš » 03 lis 2014 10:02

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: únor 11
Bydliště: R.p.R
Pohlaví: Muž
Stav:
Offline
Kontakt:

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

Příspěvekod belier » 03 lis 2014 12:43

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: říjen 14
Pohlaví: Nespecifikováno
Stav:
Offline

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

Příspěvekod myliny » 03 lis 2014 12:58

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: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

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

Příspěvekod Myloš » 03 lis 2014 13:02

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š. ;-)


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

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 0 hostů