0

Есть список ul. В котором li разных размеров. Список нужно разбить на две колонки. Я делаю display: flex в ul.

Так же задаю меньшую ширину для ul и ставлю flex-wrap: wrap. Таким образом получаю список из двух колонок. Но мне нужно, что бы li прижимались к верхнем li.

Вот как получается у меня:

введите сюда описание изображения

То есть к примеру 3 блок должен прижиматься к блоку 1. В реальности li будет много Можно ли это сделать на флексах? Если нет то какие есть варианты ?

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul {
  width: 300px;
  border: 1px solid silver;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

li {
  margin: 10px;
  width: 100px;
  list-style: none;
  margin-top: 10px;
  border: 1px solid silver;
}

.a {
  height: 100px;
}

.b {
  height: 200px;
}

.c {
  height: 70px;
}

.d {
  height: 120px;
}
<div class="main">
  <ul>
    <li class="a">1</li>
    <li class="b">2</li>
    <li class="c">3</li>
    <li class="d">4</li>
  </ul>
</div>

2 ответа 2

1

На css

.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; 
    font-size: .85em;
    -moz-column-gap: 1.5em; 
    -webkit-column-gap: 1.5em;
}
 

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box; 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-shadow: 2px 2px 4px 0 #ccc;
}
 

img, iframe {
max-width: 100%;
height: auto;
display: block;
}
 

.item a {
text-decoration: none;
color: #359CC6;
margin: 0 10px;
}
 

.item a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}
 

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
 
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
 
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
 
@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
 
@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<ul class="masonry">
  <li class="item">
    <img src="http://placehold.it/350x200" alt="">
    <a href="">item1</a></li>
  <li class="item">
    <img src="http://placehold.it/250x320" alt="">
    <a href="">item2</a></li>
  <li class="item">
    <img src="http://placehold.it/250x250" alt="">
    <a href="">item3</a></li>
  <li class="item">
    <img src="http://placehold.it/250x250" alt="">
    <a href="">item4</a></li>
  <li class="item">
    <img src="http://placehold.it/350x600" alt="">
    <a href="">item5</a></li>
</ul>

0

Если вас устраивает фиксированная высота , то можно решить вот так https://codesandbox.io/s/pkry1xq420 , если более сложная структура будет ,то можно посмотреть на библиотеку https://masonry.desandro.com/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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