В гумени страници за напасване често има проблем да се изгради един и същ вид единици (например стоки в каталога или снимките в галерията) на мрежата, като маса, но гъвкав, с неизвестен брой колони. Имало едно време единственият начин да направите това е поплавък. и блокира трябваше да натиснете наляво. С инлайн блок на този проблем може да бъде решен по-лесно и по-гъвкави единици могат да имат различна височина, както и различно вертикално подравняване. Но някак си тези модели в масата все още ляво подравнени. Тя ще изглежда, това, което не позволява да центрирате мрежата, ако не и да го разтегнете по цялата ширина на свободно пространство век чрез текстово подравняване: център или оправдае съответно?
Проблемът възниква, на последния ред, на която хоризонтална ритъм решетка слиза. Но се оказа, че този проблем може да бъде решен!
За да започнете, аз предлагам да обсъдим този въпрос по-подробно. Вижте примери за това какво се случва зад лошото на последния ред на стартовата решетка, както и да се определи това, което ние сме в очакване на резултата.
Проблемът е много подобен и в двата случая, така че изберете някоя имот от двамата, например, текст-приравни: център. И също така да използвате списъка с водещи символи.
Няма нищо необичайно в код не. Обичайната списък на всички същите стари добри елементи, инлайн блок (дисплей. Inline-блок) ниво. Може би най-интересното нещо, което се откроява е текст-приравни: център. поради което там е нашият план на трасето.
Докато елементите заемат една линия, тя изглежда така.
Но, след като на терена има на последния ред, на броя на дяловете, които е по-малко, отколкото в предишните редове, ще получите следното.
Изглежда, че е много лошо, всичко се случва, тъй като трябва да се случи. Последният ред по същия начин, както и предишните - е подравнен в средата. Но това е това привеждане в съответствие и да ни създава проблеми. Блоковете са разположени в средата, създавайки по стените на много ненужни и празно пространство. Ако, например, на последния ред има само един блок, а след това ще стане още по-голямо пространство, и устройството ще излизаш в средата като изгнаник в празен парцел.
А сега, нека да погледнем, така че ние искахме да се получат.
Както се вижда от фигурата, двата елемента на последния ред срещу левия край, независимо от факта, че ширината на линията е ясно по-голяма от общата ширина на своите блокове. Това може да се види от дясната, свободно пространство, което представлява две трети от нашите членове. Това поведение на блокове от които се нуждаем, за да получите резултат. Т.е. по същество, за да се гарантира, че привеждането в съответствие на елементите беше красива, построен точно върху решетка (дори и каучук), независимо от техния брой и бяло поле на последния ред. С други думи, ние трябва по никакъв начин да повлияе на поведението на последния ред, принуждавайки я да се подчиняват на правилата ни.
Как става това?
Преди да преминете директно към решаването на проблема, нека първо се algotitm Нека разгледаме работата на свойства като текст-приравни: център и да обоснове. Това ще ни помогне да разберем по-добре какво се случва в нашата мрежа, нейното поведение и как работата се извършва на тези имоти в последния ред.
текст-приравни: център
Нека започнем с може би най-текст подравняване: център. Тя може да бъде разделена на три основни етапа.
Първият етап
В началото на низа е взето. Изчислено общата ширина на думи или неразтворим блокове (вграден блок. Img. И т.н.) в реда. Освен това, ако тези блокове е между действителните пропуски или вдлъбнатини, които са направени с помощта като дума разстояние, и други, тези разстояния също добавят към общата ширина на блоковете.
реванша
На този етап все още е по-лесно. Изчислено ширина оставащия линия, т.е. всички свободно пространство, което не е включено в сумата от общата ширина на думи с интерактивността им дума разстояние.
Третият етап
Е, в последния етап, се случва следното. Първата в онлайн платформата с буквата движи вдясно по точно половината от резултата, получен след стъпка номер две. Какво дава абсолютно равни полета в дясно и в ляво от себе си низ.
За да се разбере по-добре как това се случи, аз направих специални права на тираж.
Преди контакт модел, който изобразява контейнер, с два реда, ширината на която е 500px.
Така че ние можем да видим, че сумата на всички блокове на първия ред с интервал от техните равни на 370px. Така на третия етап на нашия алгоритъм се изважда от първата секунда (500-370), който даде резултат от 130. На следващо място, както вече казах, аз разделен на сумата от точно половината (130/2) и да се върне назад първия блок в дясно, за резултата (65px). По този начин, нашите блокове са точно в средата, с пълнеж от двете страни да станат напълно еднакви. Ако на първия ред няма достатъчно място, най-крайно дясната блока ще бъдат преместени на втория ред и алгоритъма отново да участва в делото.
Същото важи и за втория ред. Тя алгоритъм работи по същия начин, освен това, може да се види, че страничните вдлъбнатини в него представляват дробно число (132.5px), тъй като текст подравняване: център разделя общата ширина на блоковете с интервали им за точно 2, както казах.
По принцип няма нищо сложно, всичко е напълно разбираемо и логично. В нашата ситуация, е важно да се разбере, че ако устройството е оставен сам на последния ред, той се изравни точно в средата, за сметка, изчислена за да освободите място в дясно. И това е точно това, което сме и не трябва да се допуска.
текст-приравни: обоснове
Механизмът на текст-приравни: обоснове. Вече е описано в една от статиите му. Повтарящата се няма смисъл, така че аз силно ще препоръча да се проследи връзката и я прочетете внимателно всичко за алгоритъм и постижения текст подравняване: оправдае.
Единственото нещо, което искам да спомена е, че ...
Последният ред не е бил представен на вниманието оправдае. тъй като тя работи само за изцяло запълнени редове, а в последния ред на пропуските остават винаги нормалното им размер.
Да, точно така. текст-приравни: обоснове разлика текст подравняване: център отказва да работи с последния ред, поради което обосновано настъпва изравняване.
Така че това също е част от нашите задължения, а именно да се бездейства алгоритъм за работа, както и в крайната линия.
Гледайки напред веднага и аз ще кажа, че решението за двата случая са абсолютно идентични, така че няма смисъл да се анализира всеки един от тях поотделно. Така че нека да мисля, че ние имаме в момента.
Така че по същество, ние имаме два имота текст подравняване: оправдае и център. всеки от които подравнява низ от собствената си алгоритъм. И както вече знаем, че текстът подравняване: център работи с последния ред, но текст подравняване: оправдаят - не. Но ние знаем, че ако една линия, отвъд която идва след това (да кажем последно) е изцяло запълнена, а след това тези имоти ще се подреждат нашата мрежа в съответствие с нашите правила. И дори, когато широчината на контейнера за гума, напълнена с такива линии ще се държи, както бихме искали.
Какво заключение можем да направим от това? И как може да се отнасят тези неща с последния ред, който може да бъде само една единица? Отговорът е прост. Ние трябва да разберем как да попълнят последния ред, така че останалата част от общата ширина на пространството блокове бяха пълни с нещо, а не само, че това "нещо" може да се премине към следващия ред, за да се гарантира, че нашите имоти са работили безупречно.
Така че, за да запълни последния ред, ние ще използваме псевдо-генерирани с помощта: след това. Това е добър вариант, тъй като това ще ни помогне да решим проблема и се отървете от излишните отпадъци в маркирането. По подразбиране, псевдо-генериране на единица линия, което означава точно това, което ни трябва. Тъй като редови блок ще бъде на един голям, здрав писмо и не може да бъде разделен на няколко "тухли", които няма да доведат до нищо Пътни. Е, на блока незабавно да предприеме отделен ред, а точно като редови блок - няма да доведе до резултати. С тези ценности, нашата ситуация ще изглежда така.
Както се вижда от снимката, на спомагателната веднага взе нова линия, оставяйки първата (последната в действителност), за да се подчиняват на правилата на алгоритъм. Някои положителни резултати не могат да бъдат постигнати чрез такива средства, като че ли не са опитвали, така че ние отхвърляме тези неща и отидете на това решение ...
От изложеното по-горе може да се разбере, че в нашата ситуация, можем да помогнем елемент, а именно (инлайн) нивото на линия, т.е. Нормално дисплей. инлайн + ред от текста, с интервали между думите.
Да, много сходни. Снимка на ясна линия единица, освен това, че може да се отрази на последния ред, така че също е претърпял в следващия не е напълно напускане на предишния ред неделима думата. По този начин става ясно, че това е малко не до широчината на блок (100 пиксела) в ширина, а ако е по-малка, а след това може би ще излезе и да направи нещо полезно.
В общи линии, да експериментира известно време с vysheskazannnym, светлината е роден следващото решение.
Чудесно! Нашата мрежа е подравнен, тъй като ние трябва да. Веднага ще кажа, че тази възможност се получава за всяка ширина на екрана, която не може да не се радвам. И сега самата същност.
Така че ние имаме поредица "аз мога аз мога аз мога аз мога". състоящ се от букви и пространства, но това не е проста форма като букви и пространства колкото може да изглежда на пръв поглед. Първо самото писмо, че не е избрана случайно. Фактът, че писмото и само по себе си е тесен, поради което тя е лесна за управление и регулиране на желаната ширина. На второ място самите помещения се състоят не само от пространство характер, но и защото на думата между редовете. т.е. Плюс това, стойността му е пространство, което в общия ни дава желаната ширина. О, и разбира се, не забравяйте, че един куп "пространство + дума между редовете" работи само когато става въпрос за края на друг характер, различен от празно пространство. Тъй като пропуските са склонни да "колапс" на писмото аз. идва след думата разстояние не им позволява да го направят.
Така че, всъщност, ние сме неразделни psevdobloki, под формата на "букви + подложка ляв" псевдо-първи, а след това един куп "пространство + текстообработваща разстояние + писмо", и така нататък до края на линията. Е, на следващия ред се повтаря отново и отново, само първата psevdoblok сега се състои от една буква. Но тази линия е не ни пука, ние се интересуваме само от тези "допълнителни единици", които допълват последния ред с нормални блокове в мрежата.
Между другото, на буквите трябва да бъде достатъчно, за да запълни последния ред е гарантирана до края в най-лошия случай. Т.е. техният брой е равен на максималния брой на блокове в един ред.
Да, и, разбира се, с текст подравняване: оправдае този метод работи по същия начин.
В третия. за да направи този метод на работа в IE6-7, ние трябва да заменим нашата псевдо-блок допълнителен помощник, който ще бъде включен в края на списъка. Плюс това, това ще трябва да се възползвате от инструменти като текст-оправдае. текст-приравни-миналата (поведението ми, описан в тази статия), възстановяването на собствеността в първоначалното й състояние увеличение на допълнителното устройство и други "радости", благодарение на което в тези браузъри пътя ни ще работи по същия начин. В края на тази статия ще ви дам различни опции за тази задача, така че можете да избирате.
В тази статия, ние показахме, че мрежата на блок не не е толкова въпрос. Както се оказа, че е доста контролируем. Не само красиво подреждане на блоковете в мрежата може да се постигне съвсем обикновен, а не по трудния начин, а резултатът ни дава възможност лесно да се използват плодовете на всички проекти. Какво да направя, когато се представя възможност.
О, и, разбира се, искам да благодаря на Иля Streltsynu (@ SelenIT2) за неговите невероятни идеи и помощни материали. Без него, тази статия не би било.
Послепис Може също така да се интересуват от:
Благодаря метод работи повече или по-малко, но съвършено точно позициониране с променлива ширина на прозореца не може да се постигне дори с помощта Непропорционални шрифт със специфичен размер за псевдо-блок.
И все пак, това е една патерица. Опитах се да се реши същия проблем с primeneneiem flexbox, но изглежда, че е безполезно тук. Може би някой все пак трябва да направи същото нещо по-модерно?
Страхувам се, че преди масовото пристигане на Grid Layout прости решения (по-надежден метод дядо с един куп празни дистанционни блокове, които се опитват да заменят псевдо) намери малко вероятно. Но с решетки задача ще бъде елементарно. Има само нещо да се изчака до пролетта!
По-малко от шест месеца след датата на последния промяната в W3C работен процес, тъй като ръководството на консорциума са получили предложение да се прилага този нов процес в крайна сметка по случая. И отписване е без значение HTML спецификация на музея, така че те не са объркани разработчиците ", който се представя за" значение.
Друг CSS модул, което ни казаха тихо падежът на статута, с които W3C съветва да започне рутинното използване на нови продукти. съдържа имот ви позволява да ограничите промяната на чертежа на дърво, прекрояване на CSS-кутии и да промените размера им в рамките на елемента. Ето защо е толкова важно ...
ОЩЕ
От Париж (на снимката), който наскоро премина CSS заседание на работната група, пристигнала забавни новини: Имоти решетка ред дефицит и решетка-колона-празнина, както и намаляването на решетка-празнина ...
Свързани статии