Как сделать одну большую картинку, а справа от неё два ряда маленьких

229
08 декабря 2017, 02:24

Пытаюсь флексами расположить картинки таким образом:

но ничего не выходит

подскажите, как это осуществить?

Answer 1

Отдохнул, зашел на кодпен и смог решить свою задачу самостоятельно буквально в пару строчек кода: Всё решение, в общем-то:

body { 
  background-color: rgba(5, 5, 5, 0.6); 
} 
 
main { 
  background-color: #fff; 
  width: 60%; 
  margin-left: 20%; 
  min-height: 1080px; 
  box-shadow: 1px 0 10px 0 rgba(0, 0, 0, 0.5), -1px 0 10px 0 rgba(0, 0, 0, 0.5); 
} 
 
.container { 
  padding-top: 100px; 
  display: flex; 
  justify-content: center; 
} 
 
.right { 
  display: flex; 
  flex-direction: column; 
}
<main> 
  <div class="container"> 
    <section class="left"> 
      <img src="http://via.placeholder.com/280x300" alt=""> 
    </section> 
    <section class="right"> 
      <img src="http://via.placeholder.com/250x150" alt=""> 
      <img src="http://via.placeholder.com/250x150" alt=""> 
    </section> 
    <section class="right"> 
      <img src="http://via.placeholder.com/250x150" alt=""> 
      <img src="http://via.placeholder.com/250x150" alt=""> 
    </section> 
  </div> 
</main>

Answer 2

На display:grid; когда-то писал даже с фильтрацией https://github.com/kliford/Portfolio-Slider

.new1 { 
    display: grid; 
    grid-gap: 10px; 
    grid-template-columns: repeat(4, 1fr); 
    grid-auto-rows: 256px; 
} 
.new1 div{ 
 border:1px solid blue; 
  
} 
.new1 .first-li { 
    grid-column-start: 3; 
    grid-column-end: 1; 
    grid-row-start: 1; 
    grid-row-end: 3; 
}
<div class="new1"> 
     <div class="first-li"> 
     </div> 
      <div> 
     </div> 
     <div> 
     </div> 
     <div> 
     </div> 
     <div> 
     </div> 
</div>

READ ALSO
Выравнивание изображения в сетке

Выравнивание изображения в сетке

Допустим есть сетка из двух рядов по 4 блока в ряду

424
Запросы в MySQL через bat файл

Запросы в MySQL через bat файл

На компе установлена MySQLМне нужно через bat файл запустить ее и выполнить некоторые sql запросы, которые лежат в файле query

340
MySQL сервер отваливается через 3-5 секунд

MySQL сервер отваливается через 3-5 секунд

При попытке подключится к серверу mysql 57 через консоль или Heidisql происходит ожидание с сообщением нет связи

234
Вложенные Parallel.For

Вложенные Parallel.For

В принципе, я более менее понял суть того, чтобы данные в потоках не пересекались, но что делать, если у меня есть в потоке свои вложенные потоки,...

242