Блог

Главная - Вопросы по программированию - Количество столбцов CSS 3 составляет один столбец

Количество столбцов CSS 3 составляет один столбец

#html #css

Вопрос:

Я пытаюсь сделать так, чтобы коробки располагались вертикально/вправо(затем вниз). Я знаю, что это не лучший метод. Но я предполагал, что это будет работать так же, как обычно с текстом. Любая помощь или указания в правильном направлении будут оценены по достоинству.

 .container {
  border: solid;
  width:740px;
}

.list ul{
  list-style-type:none;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.list li{
  max-height:245px;
  width:139px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.list li img {
  max-width:100%;
} 
 <!DOCTYPE html>
<html>
<body>
<div class="container">
    <ul class="list">
        <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum is placeholder text commonly</li>
        <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum</li>
        <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>commodo consequat</li>
    </ul>
    </div>
</body>
</html>

Ответ №1:

У вас ошибка в селекторе CSS для вашего <ul>

Вы выбираете .list ul , когда ваше намерение ul.list 

 .container {
  border: solid;
  width: 740px;
}

ul.list {
  list-style-type: none;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.list li {
  max-height: 245px;
  width: 139px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.list li img {
  max-width: 100%;
} 
 <!DOCTYPE html>
<html>

<body>
  <div class="container">
    <ul class="list">
      <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum is placeholder text commonly</li>
      <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum</li>
      <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>commodo consequat</li>
    </ul>
  </div>
</body>

</html>
Метки: