Pracoval som na správnom rozložení tekutín, ktorý pracoval so zednením / izotopom. Na ceste som sa dostal do niekoľkých chýb, z ktorých posledná som nedokázala vyriešiť.
Mojimi cieľmi boli:
- Povoliť usporiadanie mriežky izotopov kvapaliny, ktoré zmenšuje fotografie za behu
- Mriežku obrazu umiestnite horizontálne do stredu okna
- Mať žľab, ktorý nespôsobuje zablokovanie pravého stĺpca A, alebo B) zobraziť mimo stred
Začal som sa pozrieť na túto otázku: Isotope jQuery: Nastavenie kvapaliny, ako je stránka Beyonce, funguje až po zmene veľkosti okna, ale zatiaľ čo pracuje na vyriešení tohto okamžitého problému, nezaobchádza s žľabmi a viacerými stĺpmi.
Podarilo sa mi upraviť zvolenú odpoveď "jsfiddle", aby ste ju vyčistili a rozbalili:
(Prosím, odpustite nedostatok linkových prestávok, ale vytvoril jsfiddle medzi stĺpmi, ktoré narážajú na žľab).
Som sa úspešne podarilo vyriešiť problém # 1; problém # 2 sa dá ľahko dosiahnuť vytvorením nadradenej diviny s nastavenou šírkou a margin: 0 auto;; , čo nám ponecháva problém # 3:
Ak používate css na pridanie polstrovania alebo priehľadného okraja do každého <li> prvky (povedzme, margin-right: 10px; margin-bottom: 10px; alebo dokonca ekvivalentné použitie border), narážame na problém. Zrazu sa pravý stĺpec vráti do ďalšieho riadku! Toto je, samozrejme, očakávané správanie a človek by očakával, že ho jednoducho vyrieši display: inline-block; na <li> prvky (ktoré som urobil) a white-space: nowrap; k rodičovskemu prvku (ktorý som komentoval).
Bohužiaľ, ak povolíte teraz, vytvára problémové správanie <ul> prvok nezodpovedá rodičovi <div>"šírka a všetky obrázky sa zobrazia v jednom riadku.
Konečná otázka: Ako môžem dostať to správne fungovať tak, že somdostali tri stĺpce, ktoré medzi sebou pracujú s okapom, ale sú dokonale zarovnané s pravým a ľavým rodičovským prvkom? Dokonca som sa snažil plávať obrázky, ale potom existuje nejaké zvláštne správanie s izotopom.
odpovede:
0 pre odpoveď č. 1Aha! Zdá sa, že by som to mohol urobiť prostredníctvom nasledujúcej vzorky kódu:
http://jsfiddle.net/remus/4fYUb/
Ak chcete zapnúť žľab, jednoducho som to pridal outline: 10px solid white; k css.