Различное количество макетов div

Я пытаюсь создать макет с различным количеством div, т.е.

   | Large | Large |
|Small | Small | Small |
   | Large | Large |
         ...

У больших div будет 50% ширины, а у меньших - 33%.

Как я могу это сделать? Я перемещаю div так, чтобы они располагались в ряд, но не уверен, как я могу получить три меньших div, ниже более крупных, при этом все еще гарантируя, что все находится в центре?

Текущий подход:

.case-card--large {
  width: 50%;
  float: right;
}

.case-card {
  float: right;
  text-align: center;
  padding: 40px;
  width: 33%;
  border: 1px solid blue;
}

<div class = "case-card case-card--large">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card case-card--large">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>

Если вы хотите центрировать объект, то лучше не перемещать его с самого начала ...

— 24.07.2018 11:49

Хотя я не понимаю, что вы имеете в виду под центрированием здесь для начала - 2 * 50% и 3 * 33% в любом случае всегда покрывают всю ширину (почти), так что именно вы хотите «центрировать» тогда…?

— 24.07.2018 11:50

@CBroe 3 * 33% покрывает только 99% ширины .. Хотя вы упомянули это как почти, но просто для ясности: для достижения точной ширины оно должно составлять 33,33%. :)

— 24.07.2018 12:20

css

24.07.2018 11:47

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 4

Вы можете работать с техникой CSS: flex (Документы MDN).

Поместите эти элементы в родительский контейнер, установите его ширину и заставьте его вести себя как гибкий блок с помощью display: flex. Вот пример того, как я это сделал. Правила CSS ниже /* show case rules below */ используются для получения визуального результата того, что вы можете получить, используя гибкие блоки.

#cont {
  display: flex;
  flex-direction: row;
  width: 600px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.case-card {
  width: 33%;
  box-sizing: border-box;
  /* show case rules below */
  background-color: red;
  border: 1px solid black;
}

.case-card--large {
  width: 50%;
  /* show case rules below */
  background-color: yellow;
}

<div id = "cont">
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
</div>

edit: Сначала я использовал justify-content: space-around;, который немного выравнивает элементы с width: 33% посередине по отношению друг к другу. Изменение этого на justify-content: space-between; гарантирует, что внешние блоки выровнены по той же границе, что и контейнер, что может больше понравиться OP. Кредиты для Д.Шаллера

Я бы посоветовал justify-content:space-between

— 24.07.2018 12:00

@ D.Schaller: да, это дает лучший результат. Это зависит от конечного результата, но я думаю, что ОП был бы более доволен этим. Отредактировал пост.

— 24.07.2018 12:05

У меня есть небольшой фрагмент с похожим подходом, возможно, вы захотите отредактировать его в своем ответе в качестве альтернативы. автоматическое изменение размера для подразделов в flexbox. Что я там сделал: я использовал subdivs под названием «row», чтобы обернуть элементы в каждой строке. Затем я сделал их гибкими и сказал всем дочерним элементам "row" иметь одинаковую ширину, так что ширина меняется в зависимости от количества элементов, поэтому ему не придется изменять размер, если он будет использовать 4-5 случаев на строку.

— 24.07.2018 12:10

24.07.2018 11:57

Вот мое решение.

Я использовал display:inline-block для каждой коробки

* {
  box-sizing: border-box;
}
.container {
  font-size: 0; /* to remove space betwen inline elements*/
}

.wrapper {
  font-size: initial;
}

.case-card {
  text-align: center;
  padding: 40px;
  width: calc(100% / 3);
  border: 1px solid blue;
  display: inline-block;
}

.case-card--large {
  width: 50%;
}

<div class = "container">
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class = "case-card case-card--large">
    <div class = "wrapper">
      <p>Dummy text Large</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
  <div class = "case-card">
    <div class = "wrapper">
      <p>Dummy text</p>
    </div>
  </div>
</div>

24.07.2018 12:04

Вам нужно включить box-sizing: border-box, потому что вы используете заполнение, или указать ширину как width: calc (33% - 80px), а также создать класс .large как подкласс или иначе, в вашем случае, поставить! Important, потому что теперь не не работает и все шириной 33%

body{
  text-align:center;
}

.case-card {
  box-sizing: border-box;
  display:inline-block;
  text-align: center;
  padding: 40px;
  width: 33.33%;
  border: 1px solid blue;
  margin: 0 -2px;
  
}

.case-card.large{
   width: 50%;
}

<div class = "case-card large">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card large">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>

24.07.2018 12:06

Хорошо .. Итак, я немного изменил код, и он работает вполне нормально. Надеюсь, это поможет вам.

Вместо float:right использовал

float:left

и добавлена граница в класс-оболочку.

https://codepen.io/anon/pen/oMWMBE

.case-card--large {
  width: 50%;
  float: left;
  text-align: center;
}
.wrapper { border: 1px solid blue; }
.case-card {
  float: left;
  text-align: center;
  width: 33.33%;
}

<div class = "case-card--large">
  <div class = "wrapper">
   <p>Dummy text</p>
  </div>
</div>
<div class = "case-card--large">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>
<div class = "case-card">
  <div class = "wrapper">
    <p>Dummy text</p>
  </div>
</div>

24.07.2018 12:13

Другие вопросы по теме

Я хотел бы сделать отдельные html файлы, содержащие css и javascript * .html, * .js и * .css

Центрировать значение прогресса на фоне индикатора выполнения

Как добавить прокручиваемую навигацию в контейнер с помощью flex-grow

Элементы параллакса не совпадают при прокрутке назад

GTM: селектор CSS не работает с идентификатором кнопки

Изображение в фоновом режиме обрезается, когда разрешение экрана меньше

4 столбца в 1 ряд

Как я могу сохранить соотношение сторон изображения в строке шаблона сетки?

Как сохранить текущую вкладку активной при переключении ul в JavaScript

Табличка не работает в Safari

Различное количество макетов div

Ответы 4

Другие вопросы по теме

Похожие вопросы