Как расположить несколько блоков div в ряд?
Одной из самых частых задач в вёрстке страницы — равномерное расположение блоков div по горизонтали с возможностью переноса на следующую строку. Для этого блоки
Располагаем n блоков div в горизонтальный ряд
Всё достаточно просто. Воспользуемся свойством float (выравнивание с обтеканием). Важно, чтобы минимальная ширина страницы/окна/родительского элемента позволяла вместить в себя как минимум два. Остальные блоки переносятся на следующую строку.
Как запретить обтекание блоков
Бывает так, что одна строка может наехать на другую. Для этого отменим обтекание свойством clear. Зададим его для div, который будет размером по высоте в 1 пиксель и ширине 100%. При надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу.
Теперь к практике, примерам и исходникам.
Пример горизонтального расположения нескольких блоков
Всем div мы присвоим параметр float:left. Для наглядности создадим 6 таких блоков:
DIV 1 DIV 2 DIV 3 DIV 4 DIV 5 DIV 6
Смотрим пример работы и скачиваем исходники:
Рекомендую масштабировать страницу и посмотреть за поведением элементов.
Если задача состоит в том, чтобы расположить два больших блока в один ряд, то нужно float для них задать left для одного и right для другого. Опять же, ширина блоков не должна превышать ширину страницы/окна/родителя, иначе они перенесутся на следующую строку.
Спасибо за внимание! Удачи в вёрстке!
Как поставить блоки по горизонтали по 2 два блока?
Картинка:
Lame - почувствуй эмоцию на вкус 
Русская кухняEurope кухняАзиатская кухняВосточная кухня* < margin: 0; padding: 0; text-decoration: none; color: white; transition: all.2s ease; justify-content: center; font-family: Comic Sans MS; >html .header < max-width: 100%; min-height: 5%; background: #2b43ff; >.nav ul < display: flex; justify-content: center; font-size: 75%; >.nav ul li < display: block; margin: 10% 5% 5% 5%; >.nav ul li a:hover < background: #ff8955; border-radius: 10%; padding: 10%; >/*КОНЕЦ ШАПКИ*/ .main < max-width: 100%; height: auto; >.main_1 < max-width: 35%; height: auto; background-color: #ff6915; border-radius: 5%; margin: 7.5%; text-align: center; padding: 3% 1.5% 1.5% 1.5%; font-size: 80%; >img < width: 90%; height: auto; border-radius: 5%; >.main .main_1 < display: inline-block; >/*КОНЕЦ MAIN*/ footer < max-width: 100%; min-height: 200px; background: #1d2239; text-align: center; padding: 5%; >.left < line-height: 50px; font-size: 12px; text-align: center; >.right < line-height: 50px; font-size: 12px; text-align: center; line-style: none; >/*КОНЕЦ ФУТЕРА*/ @font-face < font-family: Comic Sans MS; src: url(../fonts/comic.ttf) >- Вопрос задан более трёх лет назад
- 667 просмотров
1 комментарий
Простой 1 комментарий
Как разместить два слоя с заданной шириной рядом по горизонтали?
Разместить рядом по горизонтали два блочных элемента фиксированной ширины.
Решение
Слой, создаваемый через тег , является блочным элементом веб-страницы. Это означает, что по ширине слой занимает все доступное пространство и всегда начинается с новой строки. Поэтому ограничение ширины слоев никак не приведет к тому, что блоки станут располагаться рядом. Для нашей цели следует воспользоваться стилевым свойством float со значением left . Это свойство превращает блочный элемент в плавающий, что в свою очередь приводит к выравниванию слоя по левому краю и его обтеканию другими элементами по правому краю. На деле же слои при подобной манипуляции выстраиваются не друг под другом как обычно, а рядом по горизонтали. Но только в том случае, когда ширина слоев задана через свойство width , как показано в примере 1.
Пример 1. Слои заданной ширины
HTML5 CSS 2.1 IE Cr Op Sa Fx
Слои по горизонтали Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Слои, располагающиеся по горизонтали с помощью float
Данный пример работает только для слоев, у которых ширина задана явно в процентах или пикселах через свойство width . Чтобы обтекание не распространялось дальше на последующие элементы, необходимо применить свойство clear , оно отменяет действие float . В примере для этой цели создается «пустой» элемент .
При уменьшении размеров окна браузера до определенной величины, слои сверстанные по указанной методике перестают располагаться по горизонтали и «перескакивают» вниз друг под друга (рис. 2). Чтобы этого не происходило, воспользуйтесь стилевым свойством min-width .
Рис. 2. Сдвиг слоев при уменьшении окна браузера
Предыдущая запись