Ориентировать группу divs на CSS

мне хотелось бы знать, как было бы возможно выравнивать группу divs (4 divs) следующего способа:

Imagen

Я попытался делать это с float:left, но если я это делаю, они вытекают у меня вне главного div. Кроме того, поскольку видят в изображении, я хочу, чтобы был край между ними. Вещь состоит в том, что я не нахожу способ размещать их таким образом, мне не приходит в голову другая вещь больше что posicionarlos индивидуально, но я уверен, что возможно делать более легко.

1
задан 02.09.2016, 10:51
3 ответа

Если ширина и высота четырех ящиков известны и установлено, используя flexbox и calc (IE10 +) ему возможно удаваться таким образом.

Я хочу сделать разъяснение: flexbox он идеальный для layouts единственного размера, из-за чего в этом случае это может не быть лучшее решение. В будущем cerceno у нас будут родные сверчки с css, что решат эту проблему гораздо более простой формы.

.contenedor {
  border: solid 1px black;
  margin: 10px;
}

h1,
h2 {
  text-align: center;  
}

.cajas {
  border: solid 1px blue;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
}

.caja {
  background-color: red;
  margin: calc(25% - 50px);
  height: 100px;
  width: 100px;
}
<div class="contenedor">
  <h1>Título centrado</h1>
  <h2>Subtítulo centrado</h2>

  <div class="cajas">
    <div class="caja">
    </div>
    <div class="caja">
    </div>
    <div class="caja">
    </div>
    <div class="caja">
    </div>
  </div>
</div>
2
ответ дан 24.11.2019, 13:30

Я aГ±adirГ-a 2 divs больше. Один для каждой колонны и другого для субобъектов нижней части титула, который только вмещает две колонны.

0
ответ дан 24.11.2019, 13:30
  • 1
    #191; C и # 243; mo оставаться и # 237; в c и # 243; я говорю тогда? Прежде всего CSS – Pablo 02.09.2016, 11:09
  • 2
    Он лучше, если в и # 241; ades c и # 243; я говорю, которого ты предлагаешь, чтобы видеть c и # 243; mo быть и # 237; в твой soluci и # 243; n. – kikocorreoso 02.09.2016, 11:22

Быстрое приближение может быть следующим:

HTML

<div class="container">
  <h1>Título centrado</h1>
  <h2>Subtítulo centrado</h2>

  <div class="box-container">
    <div class="box">
      <div class="box-inner"></div>
    </div>
    <div class="box">
      <div class="box-inner"></div>
    </div>
    <div class="box">
      <div class="box-inner"></div>
    </div>
    <div class="box">
      <div class="box-inner"></div>
    </div>
  </div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  text-align: center;
}

.box-container {
  width: 80%;
  margin: 0 auto;
}

.box-container::after {
  content: "";
  display: block;
  clear: both;
}

.box {
  float: left;
  position: relative;
  padding-bottom: 50%;
  width: 50%;
  background-color: transparent;
}


.box-inner {
  position: absolute;
  top: 10em;
  bottom: 10em;
  left: 10em;
  right: 10em;
  border: 1px solid #333;
  background-color: purple;
}

Также ты мог бы получать это используя гибкие ящики или flexbox.

Здесь пример функционируя.

0
ответ дан 24.11.2019, 13:30