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/

Ваш ответ

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

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