Div-новогодишно колони с еднаква височина на CSS

Начало »статии» DIV-Nye колона на същата височина в CSS

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

Да предположим, че имате следното маркиране: шапка, три тонколони (вляво, в центъра, в дясно) и мазето на страницата.

Стъпка 1 Първо, увийте в бъдещите колони DIV-контейнер. Например, присвояване на клас на колони.

Стъпка 2 Остава да се регистрирате в сайта следните стилове:

Тук ние каже на браузъра, които изискват опаковъчен материал, контейнер, показващ как масата на блок в цялата ширина на родителя, с изключения за непредвидени изкривявания размер на таблицата, моля, помисли за своите граници (плюс надбавка изважда -otstupy страни, договорени за ползване умишлено, в противен случай размерът ще бъде изкривен). Но вградени в тази обвивка DIV-а първичен порив да покаже как клетката на таблицата с регулируема ширина и същото внимание на размера на клетките по време на техните граници, а не по границите на съдържание, които се съдържат в тях (за регулиране на височината на браузъра се прави).

Забележка В CSS2 не поддържа имот кутия оразмеряване. така че за по-стари браузъри, ако искате да определите размера на клетките, това трябва да се направи минус границата - и уплътнение -otstupov.

Етап 3 (по желание). Сега, ако ние, например, иска да направи странична колона на фиксиран размер, в стил просто трябва да се регистрирате желаните ограничаващи колони размер. Да предположим, че искаме лявата колона - 300 пиксела, както и правото - 200 пиксела и в допълнение към светло-тъмната невнимание говори на ръбовете части на съдържанието му.

Забележка Спецификацията на отношенията обекти, както се използва, за да се покаже един пример, че е необходимо да се гарантира, правилата за работа в стил само за конкретните графи, пряко принадлежат към обвивката. А зачитане на допълнителен случай с Noindex етикет служи за да изработи положението, когато SEO-Schnick сайт реши да закрие отделна колона от индекса от търсачките (сега в структурата на онлайн магазини, това е основната част).

очевидни предимства

прост изпълнение;
гарантирана същата височина на колоните;
колона преподреждат, ако е необходимо;
лесно да добавят допълнителни колони или премахване на излишни;
Колона лесно скрити от индексиране в маркера за опаковане Noindex;
тя не плава е решение, така че не е дефект "пада от колоната на нов ред."

Важна SEO части на това решение е, че стайлинг DIV-говорителя не вреди на страницата за промоция търсачката по-долу клетка от таблицата. В крайна сметка, в съответствие със спецификацията, правила стил описват как ще се появи маркирането на екрана на браузъра, и във всеки случай не отменят типа съдържание на елемента. Това означава, че в горния пример, стилът се нуждае само от браузъра, за да покаже, клетки от таблица DIV-колона подобни. Отделно от килиите си, а именно да се покаже как клетки. Както браузъра и роботът трябва да тълкува елемент е настроен елемент маркер. В този пример, маркировките показват, че изискват колона тълкуват като DIV (разделяне, раздел), но не TD (таблица разделяне, преградни маси) въз основа само на този елемент ще бъде подобен на външен вид на клетка.

недостатъци

не работи в браузърите Internet Explorer 6, Internet Explorer 7 - те първоначално не подкрепят дисплея на имота: стилове на маса;
браузър Safari 3.1 изисква два пъти обвивката DIV-S - тук показва имота: маса клетка на първа връзка дете обект работи чрез имаща двойка контейнери майки вложени един в друг със свойствата на езика: маса и езика: маса ред;
Не можете да използвате страничната граница -otstupy в опаковане на DIV-а, ако в същото време ширината му не Asking в ширината на форма: автоматично. защото, когато се има предвид големината на браузъра обект не се вземе предвид размерът на маржа -otstupov следователно десния край на обекта "си отиде" по-далеч от разпоредбите относно размера на неотчетени тире;
високоговорители, няма да работят попитам -otstupy марж, тъй като браузърът игнорира всичко възможно манипулиране на такива граници в обектите за показване на имота: на маса клетка;
строго фиксирани фиксиране колони ширина независимо от ширината на съдържанието им (т.е., когато регион колона не се измества дори ако неразривна част от съдържанието vylezut ръба), съхранява само когато се посочва три ограничителни размери (свойства ширина мин. ширина. максимална ширина) в абсолютен единици, докато използването на относителния размер, да кажем, 20% не гарантира запазване на ширината в неразделна част от съдържанието, като имплицитно позволява на браузъра да ширини авто заем на графите на излишната космически съседни колони класифицира стационарни или ширина: авто размер.

Онлайн демо

imperacms.ru/examples/css-div-cells/index.html - тази демонстрация страница е направена въз основа на посочените по-горе кодови фрагменти. Само всичко (HTML-код и CSS-правила) са комбинирани в един HTML файл. В допълнение, говорители са боядисани в различни цветове и те добавят съдържание мулти-линия, която веднага беше ясно ефект.

дискусия

Адаптивен дизайн се превърна в норма. Е все още жив динозаври дъб колона?

Ресничести, купуват мозъци. Адаптивен дизайн и височина на колоните не е едно и също нещо.

И все пак. Имам още да се срещнат в шаблони equalheight плъгин. Може би решение на базата на JS подравнява блоковете по-добре.

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

Тази приставка карти на продуктите просто правят перфектно подравнява. И вече не знам къде другаде може да се приложи.