我在
HTML中有这个列表,我想按列排序.我试过使用它给我的浮点数：
编辑：
这些< li>的高度是未定义的,但我想C以下B,E以下E和G在F以下,而不改变结构和改变顺序.我不想使用位置绝对.我想知道是否还有其他解决方案.
HTML：
<ul> <li class="item">A</li> <li class="item">B</li> <li class="item">C</li> <li class="item">D</li> <li class="item">E</li> <li class="item">F</li> <li class="item">G</li> <ul>
OUTPUT(使用float：left; width：240px; border-left：1px solid #EEE)：
我想要的更像下面这样,而不改变HTML,因为我已经使用这个结构做出响应.
可能吗 ？
解决方法
您可以在第一个LI标签
like this上使用列CSS和margin-bottom.
ul {
column-count:4;
padding:0;
column-rule: solid lightgray 1px;
}
li {
display:inline-block;
width:100%;
}
li:before {/* demo purpose to set an height to lis */
content:'';
float:left;
padding-top:50%;
}
li:first-of-type {
margin-bottom:50%;
}
您可能需要一个JavaScript前缀或手动添加供应商前缀.
