Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar

Člen
Avatar
:19.10.2015 15:12

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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:19.10.2015 15:15

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na
Jan Lupčík:19.10.2015 15:18

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
19.10.2015 15:18
TruckersMP vývojář
Avatar

Člen
Avatar
Odpovídá na Jan Lupčík
:19.10.2015 15:25

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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:19.10.2015 15:28

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

Nahoru Odpovědět
19.10.2015 15:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar

Člen
Avatar
Odpovídá na Honza Bittner
:19.10.2015 15:42

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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na
Neaktivní uživatel:19.10.2015 16:00

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
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na
Jan Lupčík:19.10.2015 16:26

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
TruckersMP vývojář
Avatar

Člen
Avatar
Odpovídá na Jan Lupčík
:19.10.2015 17:15

Bohužel, pořád se mi neřadí do dvou sloupců ale pouze do jednoho. :(
Neaktivní uživatel 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
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na
Jan Lupčík:19.10.2015 17:17

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

Editováno
Nahoru Odpovědět
19.10.2015 17:17
TruckersMP vývojář
Avatar

Člen
Avatar
Odpovídá na Jan Lupčík
:19.10.2015 17:18

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
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na
Jan Lupčík:19.10.2015 17:26

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í
+2,50 Kč
Řešení problému
Nahoru Odpovědět
19.10.2015 17:26
TruckersMP vývojář
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.