我在
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>@H_403_8@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%; }@H_403_8@您可能需要一个JavaScript前缀或手动添加供应商前缀.