如何在CSS中浮动div？

Question

我在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>

输出(使用float: left; width: 240px; border-left: 1px solid #EEE):

我想要的更像下面的内容,而不更改HTML,因为我已经使用这种结构来做出响应.

可能吗 ？

Answer 1

你可以在第一个LI标签上使用列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前缀或手动添加供应商前缀.