如何在CSS中浮动div？

我有这个HTML列表，我想按列排序。我试过使用浮点数它给了我这样的结果：

编辑： 这些

的高度未定义，但我希望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>

A
B
C
D
E
F
G

输出（使用

浮点：左；宽度：240px；左边框：1px实心#EEE

）：

我想要的如下所示，无需更改HTML，因为我已经使用此结构来进行响应

---

可能吗

您可以在第一个LI标记上使用列CSS和边距底部

---

您可能需要一个JavaScript前缀或手动添加供应商前缀。

您知道方框的宽度和/或高度吗？不清楚（至少对我来说）这里的规则是什么-例如，为什么B不在a下？你能用语言描述一下流程应该如何进行吗？关于

float:right

？您可能需要更改

li

的顺序，但不能更改结构（如）。虽然我倾向于同意下面的评论。这看起来像是一个更好的表格。好的，看到你的编辑，你不想改变顺序。但是如果你有一个“H”怎么办？它应该去哪里？哇！疯子正是我想要的。IE8有解决方案吗？IE8，可能是写模式，需要检查一下，因为其他人也开始不理解它，所以不太使用此规则。@Suresponnukalai我知道他不想将H添加到其特殊布局：）啊啊啊啊啊啊啊……然后它就完美了。@Suresponnukalai您可以删除类型规则的

li:first，对于偶数个元素，布局似乎恢复正常。这使得它成为一个非常专业的布局-为了支持可变数量的项目，您必须使用JS或服务器代码在第一个li上操作内联样式-但仍然非常出色。
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%;
}