Zdravím,

mám 8 obrázkov, po 3 v riadku a chcem aby boli responzívne. Klasický zápis akurát spôsobí to, že pri zmenšení stránky sa akurát všetky zobrazia pod sebou.
Floaty používať nechcem. Momentálne som to vyriešil cez "column-count: 3", no tam mi vykresľuje obrázky pod sebou, teda takto:

1 4 7
2 5 8
3 6

namiesto

1 2 3
4 5 6
7 8

Nemá niekto nejaký nápad? Lebo tam mi ide práve o poradie obrázkov.

U mňa všetko v poriadku, akurát nastavuj column-count:1
http://kod.djpw.cz/qdib

// edit: Blbosť. Zle som si prečítal tvoj post. Nie je to riešenie.

Lenze tebe robi presne to iste co ja nechcem. Ak zmenis stranku, obrazky su stale rovnako velke, len naskacu pod seba. Ja chcem aby boli stale 3 vedla seba a zmensovali sa ak je stranka prilis mala.

Vid:
http://kod.djpw.cz/rdib (skus zmensit sirku prehliadaca a uvidis ze obrazky sa samy zmensia, lenze poradie je zhora dole a nie zlava do prava)

//autoeditácia príspevku (28 Nov 2014, 2:14)
Este pozorujem jednu zaujimavu vec co to robi: http://jsfiddle.net/xabxt3re/1/
Klikaj kdekolvek na obrazky a pozri si ako to pridava nove. Nejde tak ako by si ocakaval, a teda ze to bude rozmiestnovat rovnomerne medzi 3 stlpce, ale prve dva budu mat o 1 obrazok dole navyse.

Malo by to byt:

1 2 3
4 5 6
7 8 9
10

Ale je to
1 2 3
4 5 6
7 8
9 10


WTF?

Vcelku ma to frustruje, lebo to potrebujem do administracie na pridavanie novych poloziek a ked mi po pridani polozky danu polozku zobrazi, tak mi to vsetko kompletne rozhodi.

Samozrejme ze som aj googlil, ale nikto netusi preco to tak robi:
http://stackoverflow.com/questions/1505 ... lumn-count
On to testoval len do 9 poloziek, no podla toho co pozorujem to robi stale pri 4, 7, 10, 13, 16 atd.

To je ale vlastnosť atribútu column-count pretože je určený hlavne na textové stĺpce.
http://jsfiddle.net/xabxt3re/3/

//autoeditácia príspevku (29 Nov 2014, 00:28)
Jediné riešenie, ktoré ma na rýchlo napadá, je každý riadok obaliť do samostatného DIVu a vykašľať sa na column-count, čo je ale nepraktické pri dynamicky generovaných nových obrázkoch ako si dodal v ukážke.

Ja uz som to mal v dive, kedze v administracii je pod kazdym obrazkom par nastaveni ako linky atd... Takto to tiez nefunguje..

Ale myslim si ze kazdy z nas pozna toto: V skratke, ktokolvek mi povie nech nepouzivam tabulky, asi nikdy poriadne nekodoval. Tie sa stale spravaju ako maju a funguju dokonale.

http://jsfiddle.net/xabxt3re/5/ - Ak by niekto chcel, tu je funkcny kod.

weroro: Ked som sa s tym hral a ulozil som novu verziu, tak som si vsimol ze tam bola verzia 2 a 3 Ked som cital ten tvoj text, tak som len cucal

//Edit:

Novsi kod, ktory funguje aj ked tam je viacero tabuliek s rovnakym classom. Takze spravne rozozna na ktoru klikate:
http://jsfiddle.net/xabxt3re/6/
Ja si to este budem musiet upravit pre svoje potreby, ale aspon ze to funguje.

Preco ich nenafloutujes, alebo inline-block a nenastavis im width: 33.3333% ?

OT otázka ohľadom

div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

prečo sa column-count musí definovať pre každý browser zvlášť?

awtt: Lebo floaty pouzivat nechcem a pocet objektov na jeden riadok je variabilny, rovnako ako aj ich velkost a medzery mezi nimi (i ked to by slo spravit priamo vez inline styly a PHP).


Spixy: Lebo vacsina prehliadacov ich nepodporuje bez toho prefixu. Jediny je asi len explorer, no pre istotu som tam mal aj -ms-column-count.

//autoeditácia príspevku (01 Dec 2014, 22:08)
Takze, este mam jeden problem. Obsah musi byt mozne zoradit, takze pouzivam jQuery UI plugin Sortable.

Problem je s tabulkami a poctom riadkov a buniek v jednom riadku. Ak dam nieco z riadku 2 do riadku 1, tak by som rad aby to presunulo nadbytocnu vec do riadku 2 (teda aby bolo TR vzdy za Xtou bunkou.

Rozmyslal som prave nad pouzitim DIVov, no tam to robi tiez kraviny.

http://jsfiddle.net/xabxt3re/9/ - divy
http://jsfiddle.net/xabxt3re/10/ - tabulky

Skuste premiestnovat obrazky hore, dole, do stran a pochopite.

float, a rovnake velkosti obrazkov

http://jsfiddle.net/xabxt3re/11/

Ach jaj, co clovek nespravi aby nieco bolo "dumb proof". Ja by som si najradsej editoval cisla priamo v DB manualne Aj ked pisem niekde novinky / clanky pisem priamo v HTML, lebo vacsina WYSWIG editorov vypluje 5x dlhsi kod ako je treba, hlavne ked sa robia tabulky napr s nejakym poradim a skore... Meh.

http://jsfiddle.net/xabxt3re/14

Osobne som nechcel pouzivat floaty, ale asi budem musiet. Hlavne co mi teraz vadi je prave placeholder pre Sortable. Pri tabulkach to vyzera pekne, pri divoch nie.

http://jsfiddle.net/xabxt3re/13

Podarilo sa mi to sice aj spravit, no to CSS ma zabije.... Zasa prerobit polku kodu

keby sa prinutis hned na zaciatku floatovat, tak nemas ziadny problem.. a opat s tym placeholderom si neporiesil float, on musi byt taky isty element ako tie ostatne, a musi mat rovnaku velkost.. (sirka sa rozsirila kvoli borderu, a vysku musis nastavit, lebo v nom nie su ziadne elementy)

urobil som opat hardcode hodnoty, da sa to samozrejme spravit ovela rozumnejsie, ale nechce sa mi len aby si videl, ze to nie je ziadny problem:
http://jsfiddle.net/xabxt3re/15/

Tamto som si uz sam opravil pred cca 6 hodinami (v predchadzajucom prispevku, prvy link je opravena verzia).


Len mam problem s tym, ze vzdy u prveho elementu (divu) mi to dava nezmyselne hodnoty pre placeholder.
Vsetky ostatne divy maju na px presny placeholder, no prvy ho ma stale o cosi vacsi (cim je sirsia obrazovka, tym je sirsi aj palceholder)..

Kod co pouzivam (ked som pouzival tu cast s UI, tak mi to davalo uplne vsade vacsi placeholder, takto to robi len u prveho a kedze su obrazky roznych velkosti, nemam ti ako spravit cez CSS:
Ps.: Ak chces, mozem ti v PM poslat link na dany web aby si videl co mi to robi...