Autor Zpráva
Tremono
Profil
Zdravím,

řeším, jak roztáhnout div podle výšky řádku, respektive podle výšky nejvyššího divu na aktuálním řádku. Přičemž divy jsou různé šířky a dynamicky zalamované podle šířky okna. Nejlepší bude, podívat se do kódu na
ukázku.

Možná na to bude CSS krátké, ale raději bych to nejdřív zkusil bez javascriptu. (Pokud je řešení v javascriptu, sem s ním taky).

Díky za pomoc.
Plaváček
Profil
Tremono:

Vůbec nerozumím otázce.
preca1
Profil
Plaváček:
Já to pochopil tak, že chce aby divy, které sou vedle sebe budou mít všechny výšku jako nejvyšší div.
Tj. při šířce okna asi 750 px chce mít div 1 a 3 vysoký jako div 2 a div 7 vysoký jako div 6. Při šířce asi 1400 px chce mít divy 1, 2 a 3 vysoký jako div 4 a divy 5 a 7 vysoký jako div 6.
Chamurappi
Profil
Reaguji na Tremona:
V Explorerech se ti ukazují všechny bloky pod sebou.
Starší Explorerové neumí nastavit display: inline-block na blokové elementy.
Použij tabulku.
Tremono
Profil
Chamurappi:
Aha (až od IE10), změnil jsem to na span, tak snad je to už vidět. To bych řešil, až budu mít k dispozici explorer. (A pochopitelně nefunguje ani max-width, v exploreru tedy je pevná šířka u všech a různá výška.)

Tabulka je mi k ničemu, protože předem nevím, které bloky budou na jakém řádku (podle šířky okna), ani jak budou široké - takže tam může být jediný široký blok, nebo třeba čtyři hubený --- a tady bych právě chtěl přizpůsobit výšku všech tomu nejvyššímu. Pak když pohnu šířkou okna, a vleze mi tam další blok, který byl předtím na druhém řádku, tak by se výška všech (pěti) opět přizpůsobila tomu nejvyššímu.

preca1 to popsal dobře. Udělal jsem obrázky - před a po, aby bylo vidět, o co se snažím.
http://tremono.cz/data/height-test-a.png
http://tremono.cz/data/height-test-b.png
Chamurappi
Profil
Reaguji na Tremona:
Aha (až od IE10)
Od osmičky.

A pochopitelně nefunguje ani max-width
Proč pochopitelně? Od sedmičky přeci funguje.
Myslel jsem, že na tu notoricky známou drobnost nebude nutné odkazovat…

Řekl bych, že tvůj problém nemá žádné použitelné řešení. Flexbox má slabou podporu, různé verze prohlížečů ho podporují různě, většinou s prefixy. Pokud vím, tak bez prefixu ho implementoval jen Microsoft v Exploreru 10 a podle návrhu, který před pár týdny konsorcium ve své nekonečné moudrosti smetlo ze stolu :-)
Tremono
Profil
Chamurappi:
OT(inline-block: To už jsem zjistil jinde - proč s tím nesouhlasí výsledky browsershots zjistím jindy.
max-width: A moje ukázka to přeci jen nezvládla, a o té jsem mluvil - jaksi jsem si dal práci na to upozornit, než abych spíš doplnil ten doctype... Ok. Pokud to i bez doctype fungovalo, stydím se za svoji neznalost.
A každopádně - ne vše pro tebe notoricky známé, musí být notoricky známé pro každého - a věř nebo ne, někdo se tím neživí. Tohle fórum by pak ztratilo smyls existence...)

Toho jsem se bál, ale čekal jsem to.. Na ten flexbox jsem se díval, zkoušel jsem, jestli mi to k něčemu může být, ale zatím jsem nějak nerozšifroval, k čemu je to dobré - nějaká srozumitelná aktuální dokumentace?(?) Myslíš, že ten by zrovna to dokázal? (jakkoli je nepodporovaný)

Ani nějaké řešení v javascriptu?
bojga.cz
Profil *
Já myslím, že by to mohlo jít pomocí javascriptu, protože výška divu se pomocí javascriptu dopočítat dá viz http://www.cssnewbie.com/equalheights-jquery-plugin/. Jen je to potřeba aplikovat pouze na dané řádky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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