Головна »Блог» CSS »Позиціонування блоків горизонтально
Позиціонування блоків горизонтально
Відразу скажу що ці рішення не підходять для ІЕ6. Взагалі моя думка треба відстрілювати всіх хто використовує цей браузер -) Жарт -)
Штука намбер ван (зазвичай доводилося застосовувати php):
Потрібно зробити ось так:
Робимо html каркас:
Для того, щоб горизонтально розташувати блоки в оболонці, нам буде потрібно всього кілька рядків CSS коду. Перше, що спадає на думку: оголосити клас .section з властивостями width і margin-right, з потрібними нам значеннями. Але при цьому правий відступ крайнього правого елемента буде виступати за межі оболонки:
Так як правий відступ крайнього правого елемента перевищує ширину оболонки, за правилами розмітки крайній правий блок «піде» вниз:
Виникає питання: як прибрати «зайву» відступ у крайнього правого блоку без спеціального CSS класу, у якого властивість margin-right буде задано 0?
Саме тут і варто згадати про селекторі: first-child, і інвертувати праві відступи на ліві. Таким чином, щоб у першого блоку відступ зліва був нульовим. Напрошується питання: навіщо инвертировать? Вся справа в тому, що в IE7 | 8 підтримка: first-child додана, а: last-child немає. Економлять?
Отже, давайте подивимося на CSS код рішення. Спершу визначимо оболонку:
Тепер оголосимо клас вмісту оболонки .section:
У прикладі використовуються фіксовані значення властивостей width і margin-left. Ви на свій розсуд можете використовувати і процентні відносини.
Тепер нам треба прибрати відступ зліва у першого блоку, робиться це так:
#wrapper div: first-child margin-left: 0px;
>