-1

Подскажите, пожалуйста, как сделать такую штуку?

Ни с nth-child, ни с чем другим сделать не могу, ничего в голову не приходит.

Заранее спасибо.

5
  • Про Grid Layout никогда ничего не слышал?
    – Air
    19 дек 2018 в 21:00
  • В самом крайнем случае и position: absolute никто не отменял)
    – andreymal
    19 дек 2018 в 21:02
  • Если конечно я верно понял и речь о расположение блоков...
    – Air
    19 дек 2018 в 21:02
  • Про грид только мельком слышал, а абсолют эту по-моему не адаптивно) 19 дек 2018 в 21:03
  • @andreymal, ну это уж совсем извращение будет...))) Представил уже себе, как будут выглядеть стили...)))
    – Air
    19 дек 2018 в 21:04

3 ответа 3

-1

Замечания о том что нельзя делать дополнительные вложенные блоки не было

На изображении указаны размеры это и будет размером блоков в том случае если картинки будут фоном а если картинки внутри будут то достаточно их так же стилизовать но в общем дэмо:

demo с появлением при hover скрытого блока

img {
  display: block;
  outline: 1px solid #fff;
}

.items {
  display: flex;
  width: 500px;
  margin: 20px auto;
}

.wrap {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  align-items: flex-start
}

.roll {
  position: relative;
}
<div class="items">
  <div class="item">
    <div class="roll"><img src="http://placehold.it/200x200" alt=""></div>
  </div>
  <div class="wrap">
    <div class="roll"><img src="http://placehold.it/210x100" alt=""></div>
    <div class="roll"><img src="http://placehold.it/90x100" alt=""></div>
    <div class="roll"><img src="http://placehold.it/100x100" alt=""></div>
    <div class="roll"><img src="http://placehold.it/100x100" alt=""></div>
    <div class="roll"><img src="http://placehold.it/100x100" alt=""></div>
  </div>
</div>

-1

На случай нерабочей ссылки, а так grid-template-area - ваше всё

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

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

1
  • 1
    Ответы-ссылки не допускаются на Stack Overflow, потому что они могут перестать работать в будущем и ответ станет бесполезен. Опишите его суть прямо в тексте ответа, снизив необходимость ходить по ссылкам
    – andreymal
    19 дек 2018 в 21:15
-1

Реализация на CSS Grid:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "image-1 image-2 image-2 image-3" "image-1 image-4 image-5 image-6";
}

.image-1 {
    grid-area: image-1;
}

.image-2 {
    grid-area: image-2;
}

.image-3 {
    grid-area: image-3;
}

.image-4 {
    grid-area: image-4;
}

.image-5 {
    grid-area: image-5;
}

.image-6 {
    grid-area: image-6;
}

/* Для наглядности */
.grid-container div {
    outline: 1px solid red;
    padding: 20px;
}
<div class="grid-container">
  <div class="image-1">1</div>
  <div class="image-2">2</div>
  <div class="image-3">3</div>
  <div class="image-4">4</div>
  <div class="image-5">5</div>
  <div class="image-6">6</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.