时间戳

首页 > 解决方案 > CSS column-count 3 使单个列

html - CSS column-count 3 使单个列

问题描述

我试图让盒子垂直/向右排列（然后向下）。我知道这不是最好的方法。但我认为它会像通常处理文本一样工作。任何正确方向的帮助或指示将不胜感激。

.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>

标签： htmlcss

解决方案

您的 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>

推荐阅读