ширина чувствительной сетки разной высоты столбцов - PullRequest
Новая
       18

ширина чувствительной сетки разной высоты столбцов

0 голосов
/ 07 ноября 2018

Я пытаюсь воссоздать это:

enter image description here

Использование HTML / CSS, чтобы каждый цветной блок представлял собой div, в который я могу добавлять контент. Он должен быть отзывчивым, но я думаю, что справлюсь с Media Queries.

Мне удалось заставить работать макет для всех блоков, кроме нижнего левого! Я просто не могу вставить его в щель под верхним левым блоком.

Вот мой HTML: 

<div class="container">
  <div class="box one">
    1
  </div>
  <div class="box two">
    2
  </div>
  <div class="box three">
    3
  </div>
  <div class="box four">
    4
  </div>
  <div class="box five">
    5
  </div>
  <div class="box six">
    6
  </div>
</div>

и мой CSS: 

.box {
  display:inline-block;
  margin:0;
  float:left;
}

.one {
  background:#000;
  color:#fff;
  width:40%;
  height:400px;
}
.two {
  background:#ddd;
  color:#000;
  width:60%;
  height:200px;
}
.three {
  background:#efefef;
  color:#000;
  width:30%;
  height:400px;
}
.four {
  background:#222;
  color:#fff;
  width:30%;
  height:200px;
}
.five {
  background:#754;
  color:#fff;
  width:30%;
  height:200px;
}
.six {
  background:#c3d;
  color:#fff;
  width:30%;
  height:200px;
}

Я настроил это в Codepen:

https://codepen.io/maniac123/pen/oQbgMr

Кто-нибудь знает, как получить этот последний «6» div в слот под «1»?

Ответы [ 4 ]

0 голосов
/ 07 ноября 2018

Если вы хотите использовать CSS Grid. Тогда я бы порекомендовал использовать его. Кроме того, это значительно облегчает работу с кодом.

Вот CSS: 

.container {
    display: grid;
    grid-template-areas:
    "one two two"
    "one three four"
    "five three six";
}

.box{
  min-height: 200px;
}

.one {
    background: #000;
    color: #fff;
    grid-area: one;
}
.two {
    background: #ddd;
    color: #000;
    grid-area: two;
}
.three {
    background: #efefef;
    color: #000;
    grid-area: three;
}
.four {
    background: #222;
    color: #fff;
    grid-area: four;
}
.five {
    background: #754;
    color: #fff;
    grid-area: five;
}
.six {
    background: #c3d;
    color: #fff;
    grid-area: six;
}

А вот кодовая ручка: https://codepen.io/anon/pen/vQLOxy

В моем примере я использую именованные области сетки. Если вы хотите поменять местами одну из блоков с другой. Вы можете поменять их grid-area свойства.

Если вы выберете эту опцию, я бы порекомендовал вам больше взглянуть на CSS Grid, поскольку он делает жизнь намного проще. Вот статья, где вы можете прочитать об этом подробнее: https://css -tricks.com / snippets / css / complete-guide-grid /

0 голосов
/ 07 ноября 2018

Попробуйте так:

<div class="container"> <div class="box" style="width: 40%;"> <div class="one" style="width: 100%;"> 1 </div> <div class="six" style="width: 100%;"> 6 </div> </div> <div class="box two"> 2 </div> <div class="box three"> 3 </div> <div class="box four"> 4 </div> <div class="box five"> 5 </div> </div>

0 голосов
/ 07 ноября 2018

Поскольку вы используете фиксированную высоту для блоков, вы можете использовать следующее: 

.six {
margin-top: -200px;
...
}

Я бы порекомендовал взглянуть на CSS Grid.

0 голосов
/ 07 ноября 2018

Вы должны использовать CSS-сетку,

Я бы посоветовал разобраться в этом прежде всего ..

но вот как это можно сделать: 

.container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}

.box-one{
  grid-column: 1/2;
  grid-row: 1/3;
}

где столбцы идут слева направо, а строки сверху вниз

это будет делать только первый, остальное должно быть сделано таким же образом

...