我想根据 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>
最佳答案
来自 CSS tricks - Guide to Responsive-Friendly CSS Columns :
Use
column-count
andcolumn-width
together for the best control over CSS columns. You can declare each property or use the shorthandcolumns
.When both properties are declared,
column-count
is the maximum number of columns andcolumn-width
is the minimum width for those columns.
但是您没有最大列数,更像是最大高度,这似乎效果不佳。
使用 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
关于javascript - 根据div的最大高度排列元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30506909/