Как расположить два блока рядом css

Как расположить два блока рядом css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b83761dec7a22f5 • Your IP : 89.162.247.52 • Performance & security by Cloudflare

Как расположить несколько div’ов в горизонтальной плоскости

Основная идея этого совета — использовать div-обертку (wrapper) и селектор CSS :first-child.

Итак, надо: сделать на странице несколько блоков, равномерно распределенных по горизонтали:

Исходный код такой разметки предельно прост:

Для того, чтобы горизонтально расположить блоки в оболочке, нам потребуется всего несколько строк CSS кода. Первое, что приходит в голову: объявить класс .section со свойствами width и margin-right, с нужными нам значениями. Но при этом правый отступ крайнего правого элемента будет выступать за границы оболочки:

Так как правый отступ крайнего правого элемента превышает ширину оболочки, по правилам разметки крайний правый блок «уйдет» вниз:

Возникает вопрос: как убрать «лишний» отступ у крайнего правого блока без специального CSS класса, у которого свойство margin-right будет задано 0?

Именно здесь и стоит вспомнить о селекторе :first-child, и инвертировать правые отступы на левые. Таким образом, чтобы у первого блока отступ слева был нулевым. Напрашивается вопрос: зачем инвертировать? Все дело в том, что в IE7|8 поддержка :first-child добавлена, а :last-child нет.

Итак, давайте посмотрим на CSS код решения. Сперва определим оболочку:

Теперь объявим класс содержимого оболочки .section:

В примере используются фиксированные значения свойств width и margin-left. Вы на свое усмотрение можете использовать и процентные значения.

Теперь нам надо убрать отступ слева у первого блока, делается это так:

Как уже было сказано выше, единственный недостаток этого подхода то, что IE6 не поддерживает селектор :first-child. В этом случае придется использовать условные комментарии для того, чтобы объявить-таки отдельный класс (например, .section-first). Свойства этого класса будут с теми же значениями, что в классе .section, только свойство margin-left = 0.

Как разместить два блока div рядом?

как разместить рядом два блока div

Как разместить рядом друг с другом два блока <div>?

Недавно появилась у меня необходимость разместить два блока <div> рядом друг с другом. Связано это было с тем, что я заменил все изображения, используемые в дизайне сайта одним CSS спрайтом. А это значит что все изображения необходимо было добавлять через CSS, для чего и использовался блок <div>. Да вот проблема: второй блок упорно не хотел находится рядом с первым и слезал ниже необходимого уровня. После некоторого шаманства эти два блока начали наезжать друг на друга и второй почти что полностью перекрывал первый. Под блоками я имею ввиду соответствующие им изображения. Чтобы найти компромисс я полез изучить недра Интернета и нашел решение, с которым сейчас Вас познакомлю.

Размещаем два либо более блока <div> рядом друг с другом

Решение, как оказалось, весьма и весьма простое. Объясню я его на примере: в дизайне сайта должны находится два картинки рядом друг с другом. В HTML коде страницы происходит поочередный вызов двух блоков <div>:

Если кто не в курсе, то каждая из этих команд указывает где должен быть расположен данный блок: справа, слева или по центру соответственно. Допустим блоки из нашего примера должны быть расположены слева друг за другом, в таком случае Вам в обе стили необходимо добавить строку

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

Такую строку необходимо добавить в каждый стиль, который используется для вывода хотя бы одного из этих блоков <div>. Аналогичные действия необходимо произвести чтобы привязать блоки к правому краю или по центру. Вот и всё.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *