Главная » Языки программирования

Html три вертикальных блока

На чтение 8 мин
Содержание
  1. How to display 3 items per row in flexbox?
  2. 3 Answers 3
  3. Разделение страницы на 3 независимых вертикальных блока
  4. 2 ответа 2
  5. Html три вертикальных блока
  6. CSS: как вложить три блока «матрёшкой» и центрировать контент в них?
  7. Идеальная 3-колоночная вёрстка средствами CSS

How to display 3 items per row in flexbox?

I have a list and I want to display my li elements horizontally and 3 per row. I’ve been trying to get what I want, but no luck. Is there a solution?

    @foreach(App\Http\Controllers\HomeController::getservice($service->id) as $key => $value)
  • title>>

    description!!>

    @endforeach

.serv ul < display: inline-flex; margin: 0; padding: 0; width: 33%; text-align: left; float: left; >.serv ul li < list-style: none; display: inline-block; padding: 0; >.serv ul li span

3 Answers 3

  • You probably want to use display: flex not inline-flex .
  • Add flex-wrap: wrap to allow wrapping onto multiple lines.
  • Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

  • flex-basis: 33.333333%
  • You can also use the flex ‘s shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .

How to combine that with flex gap. It seems to break if the item has a gap: 1em or any other value applied and only two are shown per row.

@BenjaminK for padding add box-sizing: border-box to li, for margin say 1em change it to flex: 0 0 calc(33.333333% — 2em).

I had this same issue, but the selected correct answer did not work cause the my child items needed to have a fix width so here is my solution to show X items of fix width on DISPLAY: FLEX.

// Flex item width required: 215px // Flex item margin 20px on each side: 215px + 20 + 20 = 255px // I needed 3(your item per row) so: 255px * 3 // Then to (100% of parent-flex minus 255 * 3) / 2 padding on each side // So it stays in the center. padding: 40px calc((100% - (255px * 3)) / 2); 
*, *::before, *::after < box-sizing: border-box; >.parent-flex < display: flex; flex-wrap: wrap; justify-content: center; background-color: tomato; padding: 40px calc((100% - (255px * 3)) / 2); >.flex-item

Источник

Разделение страницы на 3 независимых вертикальных блока

Задача состоит в том, что необходимо разделить на три части страницу. Два сайдбара слева и справа, и контент посередине. Ширина каждого блока статическая и главное что блок с контентом должен отображаться по центру. Неожиданно возникли проблемы с такой задачей и нигде не могу найти решение, уже вроде все перепробовал и интернет прошерстил. Вот что у меня вышло с помощью display: table. Но блоки между собой очень зависимы, и я даже не могу воспользоваться какими-либо отступами для контента, не затрагивая другие блоки. HTML:

 
 
 
some content some content some content some content some content some content some content some content some content
 
 
 
some content some content some content some content some content some content some content some content some content
 
 
 
some content some content some content some content some content some content some content some content some content
 
 
 
.page-wrapper < display: table; width: 100%; height: 100%; >.left-panel-wrapper, .right-panel-wrapper < display: table-cell; width: 100px; height: 100%; background-color: #f6f8fa; >.left-panel, .right-panel < display: inline-block; >.content-wrapper < display: table-cell; >.content

2 ответа 2

.page-wrapper < display: flex; justify-content: space-between; >.left-panel-wrapper < width: 200px; background-color: orange; >.right-panel-wrapper < width: 200px; background-color: green; >.content-wrapper < /*width: 250px;*/ width: calc(100% - 400px); padding: 0 30px; >
 
 
 
some content some content some content some content some content some content some content some content some content
 
 
 
some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
 
 
 
some content some content some content some content some content some content some content some content some content

на inline-block с костылём

.page-wrapper < text-align: justify; overflow: hidden; min-width: 1000px; >.page-wrapper:after < content: ''; width: 100%; display: inline-block; >.left-panel-wrapper < display: inline-block; width: 200px; background-color: orange; vertical-align: top; >.right-panel-wrapper < display: inline-block; width: 200px; background-color: green; vertical-align: top; >.content-wrapper < display: inline-block; vertical-align: top; width: 500px; margin: 0 auto; padding: 0 10px; >/* костыль */ .left-panel-wrapper, .right-panel-wrapper, .content-wrapper < position: relative; >.left-panel-wrapper:before, .right-panel-wrapper:before, .content-wrapper:before
 
 
 
some content some content some content some content some content some content some content some content some content
 
 
 
some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
 
 
 
some content some content some content some content some content some content some content some content some content

Суть в том, что обвертки даёте overflow: hidden; а каждой колонки подкладку в виде before, через absolute, что создаёт вид background.

Источник

Html три вертикальных блока

БлогNot. CSS: как вложить три блока «матрёшкой» и центрировать контент в них?

CSS: как вложить три блока «матрёшкой» и центрировать контент в них?

То есть, получить вот такое:

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

На вложенных табличных тегах сделать такое элементарно, а вот на разделах div кодик как-то уродлив вышел, и в старых браузерах ничего позиционироваться не будет, мне кажется, но как сделать лучше? 🙂

В принципе, это же общая схема элемента HTML получилась. В Firefox, IE11 и «Хромом» из Андроида 7 дома сработало. Ниже — разметка:

 .outer < background-color: #666; margin: auto; width: 300px; height: 300px; position: relative; >.inner < height: 260px; width: 260px; margin: auto; background-color: #999; border: 2px solid blue; text-align: center; vertical-align: middle; >.insider < width: 180px; height: 180px; background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.rightText < text-align: right; transform: translate(0, 210px); >.middleText

Ну и вот такой «загадочный» подход тоже работает для вложения блоков «матрёшкой»:

 div.mydiv < width:90%; height:90%; margin:0 auto; >#wrap < width: 500px; height: 500px; position: relative; >.z < position: absolute; top:5%; left:5%; >#a #b #c #d 
margin 
border 
padding 
content

Попробуйте изменить отступы в 5% на другие. Как не работает? 🙂 Всё дело в том, что width у div.mydiv + 2 * left (есть же ещё и right ) у .z должно в сумме составлять 100%, как и div.mydiv ( height ) + 2 * .z ( top ). Тогда работает. Ну и position: relative у обёртки #wrap , а у вложенных блоков .z — абсолютная.

Ну и вот так, в принципе, ещё логичней, с отдельными сущностями (классами) для всех блоков, смещения и размеров каждого.

Многоуровневое вложение блоков по центру

Многоуровневое вложение блоков по центру
 .mybar < margin: 0 auto; >.myshift < top: 20px; left: 20px; position: absolute; >.b1 < width: 200px; height: 200px; position: relative; background-color: #ccc; >.b2 < width: 160px; height: 160px; background-color: #999; >.b3 < width: 120px; height: 120px; background-color: #666; >.b4 
margin 
border 
padding 
content

03.11.2019, 12:40 [1640 просмотров]

Источник

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

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

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

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

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

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

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

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

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

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

 html, body .main < margin:0 auto; /* Центрируем блоки */ width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */ max-width:700px; /* Устанавливаем максимальную ширину */ >.inline div < display:inline-block; /* Делаем блоки по горизонтали */ display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */ vertical-align:top; /* Выравниваем их сверху */ font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */ /* Для IE 6 и IE 7, чтобы блоки были по горизонтали zoom: 1; *display: inline; */ >div.inline /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/ .left-block < background:red; width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/ height:300px; /* Высота блока */ >.content < background:green; width:60%; height:300px; >.right-block

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

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

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

/* Простой пример @media запроса*/ @media (max-width:600px) < .inline div < display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; >>

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

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

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

Источник

Читайте также:  Интересные рамки в css
Оцените статью