Основни методи за поставяне на блокове (DIV) хоризонтално с помощта на CSS, vaden про

Често, на практика, че е необходимо да се реши проблема с групиране и привеждане в съответствие с CSS съдържание. Днес ще разгледаме основните начини за поставяне на елементи в хоризонтален ред.

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

Да се ​​избира, или методи

Има няколко начина местоположение на структурни елементи в един ред в хоризонтална равнина. Най-полезни от гледна точка на практическото използване, са:

Всеки един от тях има своите предимства, недостатъци и приложения. Нека ги разгледаме по поръчка.

"За да идиот" или малко теория

Всички структурни HTML елементи могат да се разделят на:

Inlaynovye (вградена) - като IMG, педя, и други подобни. Ние не сме в състояние да промени техния произход и ги помолете произволни линейни размери.

Блок - заема цялата ширина на родителското устройство, винаги започва с нова линия - P, H Разделение.

Един илюстративен пример на вградени и блокови структури, показани по-долу:

«Float» Метод

Както е известно (вж. По-горе), член на блок поставя на нов ред, независимо от предварително определена ширина, за да го (широчина). Според това, намаляване на размера по хоризонтала на DIV, в един ред на капси не се строи.

Най-популярни (особено сред начинаещите уеб дизайнери), методът за решаването му е да се използват свойствата на плувка.

CSS поплавък имот придоби доста популярност и практическа стойност след прехода от оформление маса метода на блок.

Float: ляво (вдясно) се трансформира в блок елемент в плаващ, подравнява вляво (вдясно) ръба на родителското устройство и определя потокът около правото (вляво), текст и други елементи.

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

И външен стилов лист със следното съдържание:

Резултатът е четири блока, разположени в хоризонтален ред и са подредени на левия ръб на родителското устройство:

Понякога в практиката е необходимо да се приведе в съответствие на блоковете в десния край на елемента родител. Променете поток около блоковете в предходния пример:

Обърнете внимание на етикетите, разположени в блоковете. На пръв поглед може да изглежда, че примерът е работил криво. Но в действителност, браузърът е обработил кода правилно: Прочетете блока от горе до долу, и направи това, което ние поискахме от него - Подравняване вдясно. Имайте предвид този момент, когато се използва свойствата на поплавъка: прав.

С цел да се пречи на движението около елементите на определено място, използвайте ред:

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

Алгоритъмът е както следва.

В резултат на това, ние получаваме следната картина:

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

1. Ширината на блоковете трябва да бъдат фиксирани. В противен случай, можете да получите нещо подобно:

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

Не забравяйте! DOCTYPE на документа, освен при показване на страницата в IE, чрез прилагане на метода, описан по-горе хоризонталната поставянето на блока, ще получи отстъп дясното 17px ред (вероятно разработчиците по свитъка маркирани).

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

За разлика от метода на «Inline-блок» за да не останете с присъствието на пропастта между блоковете в отсъствието на марж-ите.

За да определите тиретата и полетата, когато заявяват елементи използват свойства марж и уплътнение.

Метод «Inline-блок»

Като малка и блокови елементи, имат своите предимства и недостатъци в контекста на всяка конкретна задача. И какво, ако съчетаете техните предимства?

Запознайте се, заковат програмата - дисплей имот: инлайн блок.

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

Блок-линия елемент има следните свойства:

• височина и ширина на блока се определя автоматично от съдържанието и значението на вдлъбнатината (уплътнение)
• височина и ширина на блока може да се определи е фиксирано
• Няма ефект от падането на границите.

Вземем примера със създаването на прост навигационното меню, съдържащо снимки и връзки.

Резултатът е такъв меню:

Както можете да видите, той излезе крива. Но ние няма да се разстрои, в която ние прилагаме в нашия диви CSS собственост вертикално подравняване (виж по-долу за повече информация.)

Сега нашата навигационна лента е насочен към най-горния ред:

Разбира се, по-горе пример е примитивен, но аз съм сигурен, че на тази основа ще можете да създадете истински шедьовър.

1. Когато при намаляване на ширината на прозореца на браузъра nevmeschayuschiysya peremeschaetsya надолу елемент (като в случая на поплавъка: ляво)
2. Елемент показва като вграден блок чувствителни към пространства. Това води до факта, че дори и за нулеви стойности на маржа между блоковете се пролука. Тази разлика зависи от използвания шрифт. Помислете например за списъка:
   HTML:
   

В резултат на предоставянето на такъв код ще бъде следната картина:

Има няколко начина за отстраняване на пропуските:

• изберете отрицателни стойности марж:
  

зададени на шрифта: 0 за родителското устройство и шрифта ≠ 0 за inlaynovogo;

не много красива, но все пак ... Напишете код в един ред

В резултат на прилагането на всяко от горните методи е следната структура:

Ако имате няколко блок линия елементи в един ред имат различна височина, след което те се нуждаят, за да зададете имот вертикално подравняване: отгоре. Позволете ми да ви напомня, че по подразбиране вертикално подравняване настроите изходното ниво.

Cross-браузър.

• За древните версии на Firefox, за да добавите линии:
  

и заключителни елемента в допълнителен DIV-обвивка.

IE 7 и по-ранни версии - добавете редове:

Имайте предвид, че различните браузъри (първият - Firefox, а от друга - IE) тези редове избирателно реагират.

«Маса» Метод

Таблично подход отдавна е стандарт оформление, което се дължи основно на простотата и интуитивно оформление. Най-вероятно това е причината за форматиране на таблици в CSS.

Имоти показване: маса (. Таблица-клетъчна инлайн маса), възможност за форматиране на таблици елементи без използването на HTML таблици.

За хоризонтален блок разположение, имаме нужда от родител, с преден имот дисплей: маса. и подчинените елементи (клетки) с дисплея на имота: на маса клетка:

1. За разлика от методите на «Inline-блок» и «поплавък», с намаляване на ширината на прозореца на браузъра, клетките не се движат надолу.
2. Вие нямате възможност да зададете марж имота псевдо клетки.
3. Cross-браузър. Свойствата на семейството на дисплея: масата * Не се поддържат от IE6, IE7. В допълнение, IE8, можете да наблюдавате динамичните рендиране грешка psevdotablichnyh елементи под формата на случаен принцип изчезват клетки. Тази грешка най-често се наблюдава в първичната чертежа на документа

Брой: 15 (средно 4.8 от 5)