4 Метод шаблон подравняване колона

Един от най-трудните аспекти при използване на CSS е инсталирането на една и съща височина на колоните. Има различни методи, всяка от които има своите плюсове и минуси. В този урок ще разгледаме четири от тях.

Какво имаме предвид под еднаква височина колони?

Този ефект може да се постигне чрез използване на CSS фон, който ще има същата височина за високоговорителите.

Това е един доста стар трик, който широко се използва за създаване на колони с еднаква височина.

Тя се състои в използването на фоново изображение се повтаря вертикално. Пример за такова изображение е показано по-долу (данни, които тя леко се увеличава).

Такъв един образ обикновено има една пиксела по височина и широчина, равна на ширината на шаблона.

Примерът използва следната маркиране:

Контейнерът може да се използва като маркер за тяло. Примерът използва отделен елемент DIV да демонстрират възможността за прилагането на метода за съдържанието на страницата.

CSS код е много проста. Shift плаващите звена и #sidebar #Content и зададено широчина, съответстваща на тях. Задайте маржове за #container контейнер.

На фона на контейнера ние използваме образа на изкуствена-column.png (е, както е описано по-горе). Също преливане собственост е настроена за него: скрит. Необходимо е да се предотврати контейнера за сгъване.

Контейнерът винаги ще има същата височина като най-голямата колона. Фоново изображение, така че да изглежда, като че високоговорителите са на еднаква височина.

Този метод е най-добре се използва в определен модел, но тя може да се използва успешно в повечето плаващи модели.

Можете също да използвате пълната гама от визуални инструменти за произход (сенки, граници, и така нататък). Можете да използвате и образа на повече от 1 пиксела височина.

• Лесно е да се приложат ..
• Той работи независимо от височината на колоната.

• Тя изисква един образ, който използва допълнителна молба HTTP.
• Промени в модела изискват промени в изображенията.

Този метод също така използва фонова настройка на контейнера. Въпреки факта, че методът на псевдо колони има ограничено приложение, това е много проста и работи добре.

За маркиране се използва, е същият като в предишния метод:

CSS код също е много проста. Примерът използва плаващ ширината на колони, но могат да се използват фиксирани стойности.

Поставили сме фонов цвят за елементите и #content #sidebar. Не забравяйте да зададете цвят на тази колона, която се приема за най-дълго.

Основната разлика от метода на фалшиви колони е да се използва цвета на фона, вместо на изображението. Принципът на работа е един и същ - на контейнера с фона разтегне до височина от повече високи колони, и формира картина, в която изглежда, че всички говорители имат една и съща височина.

• Лесно е да се приложат.
• Лесни за поддръжка.

• Трудно е да се приложат в размер на повече от 2 колони.
• се изискват познания, които колона е по-дълъг.
• Тя не работи в шаблоните, когато на различни страници на същата колона е по-дълго от всички, това е по-кратък.

Този метод използва на рамката колоните и отрицателни маржове за формиране на илюзията за равни височина колони.

HTML маркиране не се различава от предишните методи:

Но CSS код по-интересно. Контейнерът е с фиксирана ширина и е в средата на листа. Имот за #sidebar елементи и #content има интересни последици:

Всички цветове, които се използват в този метод са настроени да #Content елемент свойства. Се задава цвят на фона и ширина на рамката се задава равна на ширината на страничната лента. Цвят на рамката използвайте този, който се предполага, че Фон на страничната лента.

Първата стъпка за да поискат от отрицателна стойност тире страничната лента, равна на неговата ширина. Така че тя да се върне назад върху екрана. Проблемът сега е в реда на наслагване на елементи един върху друг. #sidebar елемент се намира в горната част. За да се върнете в началото на страничния панел, задайте собственост на позиция: относителна.

• Той работи независимо от коя колона е по-дълъг.
• Просто инсталирайте.
• Лесни за поддръжка.

• Страничния панел трябва да има широчина фиксирана стойност, като граница ширина имот възприема само абсолютни стойности.
• Отрицателните стойности на вдлъбнатината не могат да се видят в по-старите версии на IE.

Този метод е по-трудно да се разбере от други.

Допълнителният елемент се добавя маркиране Разделение.

CSS код за този метод е по-сложно от описаните по-горе методи за привеждане в съответствие. И за двете #sidebar #Content елементи и свойства са дадени на олевяване и ширината, както и нещо допълнително.

Първо правим плаващ колона и контейнери. В примера, всички изместен в ляво, но посоката на преместване не играе голяма роля.

След това поставете на заден план за двете Разделение контейнерите. Вътрешният съд има страничен панел модел, на външен вид - основният модел съдържание.

Ако сега сте проверили, който показва на браузъра, той ще бъде видим само на фона на вътрешния контейнер, тъй като тя е по-висока в реда подреждане на елементите.

За позициониране на вътрешния съд да установи неговите свойства десен стойност от 75%, което е равно на широчината на главната колона съдържание.

Зададохме относителното позициониране и стойността на ляво от 75%, за да се премине добре.

• Методът работи независимо от ширината на колони
• Методът работи във всички шаблони.
• Можете да генерирате колкото колони.

• Методът е доста трудно да се разбере.
• Тя изисква допълнителен елемент DIV.

заключение

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!