Два контейнера в одной строке, но второй занимает пространство 2, начиная со 2-й строки

#css

Вопрос:

Название может не иметь большого смысла, поэтому вот изображение

В принципе, у меня есть список округленных элементов внутри контейнера. (слева)

Чего я хотел бы добиться, так это разделить эти закругленные элементы в 2 контейнера, сохраняя при этом один и тот же дизайн (справа).

Я не уверен, что это возможно… Любая помощь будет признательна

Вот jsfiddle с базовым шаблоном : https://jsfiddle.net/786yvmah/3/

 <div>
  <div class="container1">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="container2">
    <div>E</div>
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>I</div>
    <div>J</div>
    <div>K</div>
    <div>L</div>
    <div>M</div>
    <div>N</div>
  </div>
</div>

Например, «E» / «F» / «G» должно быть сразу после «D».

«H» / «I» / «J» / «K» должно быть прямо под «A» / «B» / «C» / «D»

«L» / «M» / «N» сразу после «K».

Ответ №1:

Вы можете просто использовать float: left .container1 , так что содержимое .container2 будет просто обтекать его. В качестве примечания вы, возможно, захотите рассмотреть возможность переноса всех вложенных <div> элементов, чтобы между каждым из ваших кругов не было произвольных пробелов:

 div > .container1 div,
div > .container2 div {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: lightblue;
  text-align: center;
}

.container1 {
  float: left;

  /* Just to show where container1 is */
  background-color: yellow;
}

 <div>
  <div class="container1">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="container2">
    <div>E</div>
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>I</div>
    <div>J</div>
    <div>K</div>
    <div>L</div>
    <div>M</div>
    <div>N</div>
  </div>
</div>

p/s: Обратите внимание , что если вы используете CSS float , не забудьте очистить поле с плавающей точкой после этого.

Ответ №2:

Я бы дал основному контейнеру класс и дисплей: flex для него вот так.

 .main
{
 display: flex;
}

Я думаю, что это то, чего вы хотите достичь, таким образом, вам не нужно использовать поплавки.