Diskuze: Dva sloupce, další řádek započne až tam, kde končí nejvyšší element předchozího

HTML a CSS HTML a CSS Dva sloupce, další řádek započne až tam, kde končí nejvyšší element předchozího American English version English version

Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:

Ahoj, tvořím web a právě se zabývám homepage. Narazil jsem ale na malinký problém. V příloze máte screen toho jak se projevuje (foceno v simulátoru tabletu, tak se omlouvám za malé rozlišení) - člány mají float:left; a přitom když jsou dva vedle sebe a jeden je delší než druhý, další řádek článků započne až tam, kde končí ten nejdelší z předchozího. Nevíte někdo, jak na to, aby se to nedělo?

Odpovědět 19.10.2015 15:12
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Vašíček
Honza Bittner:

Kvůli vlastnostem floatu toto jednoduše nelze.

Můžeš ale použít Flexbox (http://caniuse.com/#…), nebo vlastnost columns (http://caniuse.com/#…).

Nahoru Odpovědět 19.10.2015 15:15
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Vašíček
IT Man:

Popisoval jsem to ve článku o flexboxu. Mrkni na něj. :)

P.S.: Honza Bittner neobtěžuj se ani mínusem. :)

Nahoru Odpovědět  +1 19.10.2015 15:18
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na IT Man
Michal Vašíček:

Bohužel, flexbox neřeší můj problém, všechno totiž nastrká do jednoho řádku.

Nahoru Odpovědět 19.10.2015 15:25
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Vašíček
Honza Bittner:

Ono to taky musíš správně nastavit... :-`

Nahoru Odpovědět 19.10.2015 15:28
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Michal Vašíček:

Vidim ho poprve v zivote, manual zde mi nepomohl a Google take ne. Mas pro me nejakou radu? :)

Nahoru Odpovědět 19.10.2015 15:42
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Michal Vašíček
Fredep:

A nemohl bys jednoduše udělat dva sloupce vedle sebe, do kterých bys pod sebe dával jednotlivé příspěvky?

Nahoru Odpovědět 19.10.2015 16:00
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Vašíček
IT Man:

OK. Dám ti jen tipy na vlastnosti a trochu popostrčím, aspoň si ho i potrénuješ. :)

Nejdříve obal své sloupce nějakým divem. Tomu nastav display: flex; (můžeš udělat i s prefixy např. -webkit-flex). Poté nastav velikosti sloupců pomocí vlastnosti flex. Třeba jenom na hodnotu 1.
Pro seřazení pod sebe nastav hlavnímu elementu (ten, co to obaluje) vlastnost flex-wrap. Pro tebe se hodí hodnota wrap.
A výška sloupců? Ta bude automaticky stejná, výhoda flexboxu. :)

Snad ti to stačí. Když tak písni ještě.

Nahoru Odpovědět 19.10.2015 16:26
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na IT Man
Michal Vašíček:

Bohužel, pořád se mi neřadí do dvou sloupců ale pouze do jednoho. :(
Fredep Bohužel nemohl, řadím je chronologicky, takže by se to po chvíli rozhodilo.

Nahoru Odpovědět 19.10.2015 17:15
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Vašíček
IT Man:

Taky ten obsah musíš dát do rozdílných divů. A ty obalíš nějakým divem. :D

Editováno 19.10.2015 17:18
Nahoru Odpovědět 19.10.2015 17:17
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na IT Man
Michal Vašíček:

Počkej, teď tě nechápu. Mám kód:

<div id="articles">
            <article class="color-red">
                <h1>První příspěvek</h1>
                <p>loremipsum</p>
            </article>
            <article class="color-red">
                <h1>První příspěvek</h1>
                <p>loremipsum</p>
            </article>
            <article class="color-red">
                <h1>První příspěvek</h1>
                <p>loremipsum</p>
            </article>
        </div>

div s ID articles je ten obalující, article jsou jednotlivé články.

Nahoru Odpovědět 19.10.2015 17:18
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Michal Vašíček
IT Man:

Tak jak to můžeš mít v jednom sloupci? :D
Jenom mě napadá, že nemáš margin, proto ti to splývá v jeden element. :)

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 19.10.2015 17:26
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.