Question

我想根据div的最大高度安排li，如果有更多项目，则项目自动设置为右侧。

等

-------------
  1   4  7
  2   5  8
  3   6
-------------

建议我使用css或使用js的更好方法。

我试试这个，但它不能正常工作。

ul {
  column-count: 2;
  column-gap: 0;
  width: 200px;
}
li {
  display: inline-block;
  width: 100px;
  height: 100px;
  background:
    linear-gradient(
      rgba(255,0,0,0.4),
      rgba(255,0,0,0.4)
    ),
    url(http://placekitten.com/g/100/100);
  color: white;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  font-weight: bold;
  border: 1px solid white;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 1

来自CSS tricks - Guide to Responsive-Friendly CSS Columns：

一起使用column-count和column-width以获得最佳控制权   CSS专栏。您可以声明每个属性或使用速记   columns。

声明这两个属性时， column-count是最大数量   列和column-width是这些列的最小宽度。

但是您没有最大列数，更像是最大高度，而且似乎效果不佳。

使用 flexbox 及其多行换行魔术（编辑：多列此处:)并且它可能是反向的一个或另一个），您将获得预期的结果：

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* and then define:
  - flex-flow
  - align-items (vertically here)
  - align-content maybe (horizontally here)
  according to your style needs
  => https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  */
  max-height: 306px;
  background-color: lightyellow;
}
li {
  width: 100px;
  height: 100px;
  background:
    linear-gradient(
      rgba(255,0,0,0.4),
      rgba(255,0,0,0.4)
    ),
    url(http://placekitten.com/g/100/100);
  color: white;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  font-weight: bold;
  border: 1px solid white;
  list-style-type: none;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

兼容性：IE10 +
我会让你使用Autoprefixer for IE10和旧版本的浏览器，因为我厌倦了这个精彩规范的3个连续草稿^^

非常有用资源：CSS Tricks flexbox
Codepen ，上面的代码为：http://codepen.io/anon/pen/MwJYjP

根据div的最大高度排列项目

1 个答案: