Как разместить 3 блока равномерно?
Здравствуйте, я только учу html и css, взял из интернета рандомный psd, чтобы попробовать его сверстать и никак не могу понять как можно разместить 3 блока так, чтобы каждый из них был ровно по середине 1/3 экрана по горизонтали, вне зависимости от разрешения? Буду очень благодарен за помощь.
Отслеживать
задан 24 июн 2017 в 8:41
65 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
* < box-sizing: border-box; >.col-3 < height: 100px; width: 33.333%; /* Можно задать любую другую ширину блока */ background: grey; margin: .5rem; >.row
* < box-sizing: border-box; >.col-3 < height: 100px; width: 33.333%; background: grey; border:1px solid #333; display: table-cell; >.row
* < box-sizing: border-box; >.col-3 < height: 100px; width: 33.333%; background: grey; border:1px solid #333; float: left; >.row
Пример с inline-block :
* < box-sizing: border-box; >.col-3 < height: 100px; width: 33.333%; background: grey; border:1px solid #333; display: inline-block; >.row
Отслеживать
ответ дан 24 июн 2017 в 9:04
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
Огромное спасибо!
28 июн 2017 в 22:12
Примерно вот так.
* < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >.clearfix < clear: both; overflow: hidden; >.col-3 < float: left; padding: 0 10px; width: 33.333%; height: 100px; >.border-box
Отслеживать
ответ дан 24 июн 2017 в 8:48
1,227 7 7 серебряных знаков 17 17 бронзовых знаков
1) Вариант с таблицей
.grid < width: 100%; >.grid td
блок1 блок2 блок3
2) Вариант с flexbox
#flexbox < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: row; >#flexbox .item
e e e При этом ширина здесь не указывается тем самым можно разместить и больше 3x
Как адаптивно разместить блоки div (по три в ряд, а для мобильной версии центрированно один под другим)?
Для десктопов расположение блоков, которые содержат картинки 280х300, нужно разместить по три в ряд , а когда экран уменьшается, нужно чтобы блоки расположились один под другим, и не были прижаты к левому краю, как получается у меня, а размещены по центру: 
.
Вот мой HTML и CSS:
CSS practice 
* < margin: 0; padding: 0; >.wrapper < width: 100%; position: relative; >.container < position: inherit; width: 100%; display: grid; grid-template-columns: 280px 280px 280px; justify-content: space-around; >@media (max-width: 576px) < .container< display: block; justify-content: center; top: 25%; left: 25%; >>Я недавно начал изучать HTML и CSS, поэтому говорите, что не так и как правильно сделать. Буду благодарен
- Вопрос задан более двух лет назад
- 1081 просмотр
3 комментария
Простой 3 комментария
3 блока div на одной строке
Необходимо разместить 3 блока div на одной строке. Блоки фиксированной ширины(300px). Блоки размещаются внутри главного контейнера(1000px), отступы слева и справа внутри главного контейнера 30px(padding-left:30px; padding-right: 30px. Расстояние между блоками 20px(я задавал margin-right: 20px; для первого и второго блока).
Блоки я разместил как надо, всё получилось ровно и красиво.
Проблема заключается в том, что при уменьшении размера страницы(~до 50%) 3й правый блок съезжает вниз. Это не есть хорошо, как я понимаю, но не знаю как решить данную проблему.
Как исправить? Я пробовал и float, и inline-block, проблема остаётся.
В прикреплённом изображении структура задумки(для наглядности).
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Span и div в одной строке
Добрый вечер. Как можно реализовать верстку, показанную на первой картинке? Пробовал так: <span.
Два div на одной строке
Добрый вечер! Как сделать чтобы два div были в одной строке при этом мапились под окно браузера, и.
Два div`a в одной строке
Добрый день, объясните пожалуйста, в чем проблема? Как я понимаю, psot должен стать рядом с post в.
33 / 32 / 15
Регистрация: 12.06.2014
Сообщений: 119
Можете код привести полностью? Из выше написанного непонятно каким образом вы спозиционировали блоки. Я обычно задаю float:left; и все стоит, как влитое.
Добавлено через 7 минут
border часом не применяли?
Регистрация: 03.07.2014
Сообщений: 20
1 2 3 4 5
div class="container"> div class="column1">/div> div class="column2">/div> div class="column3">/div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
.container{ box-sizing: border-box; display: block; margin: 0 auto; width: 1000px; margin-top: 20px; margin-bottom: 20px; padding-left: 30px; padding-right: 30px; } .column2{ width: 300px; height: 300px; display: inline-block; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: #FFFFFF; margin-right: 20px; } .column1{ width: 300px; height: 300px; display: inline-block; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: #FFFFFF; margin-right: 20px; } .column3{ width: 300px; height: 300px; display: inline-block; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: #FFFFFF; }
Добавлено через 49 секунд
border использовался, но потом я его убрал и проблема не исчезла
Добавлено через 3 минуты
Просто получается так, что я изменяю размер страницы и расстояние между правым блоком и правым краем почему-то уменьшается. А потом просто блок переносится на новую строку по причине того, что не влезает в размер главного контейнера.
Идеальная 3-колоночная вёрстка средствами CSS
Самое правильное руководство по созданию трехколоночной верстки средствами CSS. Материал от нашего подписчика.
Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.
Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью.
На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.
Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.
Наша цель — сделать трехколоночный сайт, блоки которого будут:
- Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
- Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
- Адаптироваться при уменьшении заданных размеров.
Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block. Да-да, свойство float уже не так актуально, но оно нам все же понадобится.
Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline:
left content right Далее будет логично написать стили для этих классов, что мы и сделаем:
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал, просто с уменьшением их размера.
Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.
Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:
/* Простой пример @media запроса*/ @media (max-width:600px) < .inline div < display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; >> Более подробно можно посмотреть на JS Fiddle — приветствуется любое изменение кода в лучшую его сторону.
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
За материал выражаем благодарность нашему подписчику, Рималю Сафарову.
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.