Как сделать 3 блока в html с css

Идеальная 3-колоночная вёрстка средствами CSS

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью.

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.

Наша цель — сделать трехколоночный сайт, блоки которого будут:

  1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
  2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
  3. Адаптироваться при уменьшении заданных размеров.

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block. Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline:

Далее будет логично написать стили для этих классов, что мы и сделаем:

Размер окна больше 900px

Размер окна меньше 900px

Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал, просто с уменьшением их размера.

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:

Более подробно можно посмотреть на JS Fiddle — приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику, Рималю Сафарову.

Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.

Как разместить 3 блока равномерно?

Здравствуйте, я только учу html и css, взял из интернета рандомный psd, чтобы попробовать его сверстать и никак не могу понять как можно разместить 3 блока так, чтобы каждый из них был ровно по середине 1/3 экрана по горизонтали, вне зависимости от разрешения? Буду очень благодарен за помощь.

Пример с inline-block :

Примерно вот так.

1) Вариант с таблицей

2) Вариант с flexbox

При этом ширина здесь не указывается тем самым можно разместить и больше 3x

3 блока div на одной строке

Необходимо разместить 3 блока div на одной строке. Блоки фиксированной ширины(300px). Блоки размещаются внутри главного контейнера(1000px), отступы слева и справа внутри главного контейнера 30px(padding-left:30px; padding-right: 30px. Расстояние между блоками 20px(я задавал margin-right: 20px; для первого и второго блока).

Блоки я разместил как надо, всё получилось ровно и красиво.

Проблема заключается в том, что при уменьшении размера страницы(

до 50%) 3й правый блок съезжает вниз. Это не есть хорошо, как я понимаю, но не знаю как решить данную проблему.

Как исправить? Я пробовал и float, и inline-block, проблема остаётся.

В прикреплённом изображении структура задумки(для наглядности).

Span и div в одной строке
Добрый вечер. Как можно реализовать верстку, показанную на первой картинке? Пробовал так: <span.

Два div на одной строке
Добрый вечер! Как сделать чтобы два div были в одной строке при этом мапились под окно браузера, и.

Два div`a в одной строке
Добрый день, объясните пожалуйста, в чем проблема? Как я понимаю, psot должен стать рядом с post в.

Можете код привести полностью? Из выше написанного непонятно каким образом вы спозиционировали блоки. Я обычно задаю float:left; и все стоит, как влитое.

Добавлено через 7 минут
border часом не применяли?

Добавлено через 49 секунд
border использовался, но потом я его убрал и проблема не исчезла

Добавлено через 3 минуты
Просто получается так, что я изменяю размер страницы и расстояние между правым блоком и правым краем почему-то уменьшается. А потом просто блок переносится на новую строку по причине того, что не влезает в размер главного контейнера.

Ну не знаю. Я только что взял ваш код, добавил всем трем контейнерам float:left; и у меня ничего не уезжает.

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

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