如何在CSS中使div浮动？

Question

我有一个HTML列表，想要按列排序。我尝试使用浮动效果，但结果是这样的：

编辑: 这些<li>的高度未定义，但我想让C在B下面，E在D下面，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，因为我已经使用这个结构来实现响应式。

是否可能？

- Steffi

---

这里的规则（至少对我来说）不太清楚 - 例如为什么B不在A下面？您能用文字描述一下流程应该如何进行吗？ - CupawnTae

float: right怎么样？你可能需要改变li的顺序，但不需要改变结构（比如像这个例子：http://jsfiddle.net/68pKt/1/）。虽然我倾向于赞同下面的评论。 - Harry

看起来最好以表格的形式布局。 - Sinister Beard

好的，看到你的编辑，你不想改变顺序。但是如果你有一个“H”呢？它应该放在哪里？ - Harry

@Harry 没有 H :p，这是一个非常特殊的结构 - Steffi

Answer 1

您可以使用列CSS和对第一个LI标记的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前缀或手动添加供应商前缀。

- G-Cyrillus

---

哇！太疯狂了！正是我想要的。有没有IE8的解决方案？ - Steffi

IE8，写作模式可能需要检查一下，不过由于其他人也开始理解它，所以不太使用这个规则。 - G-Cyrillus

@SureshPonnukalai 我明白他不想将 H 添加到其特殊布局中 :) - G-Cyrillus

啊哈...那就完美了。 - Suresh Ponnukalai

@SureshPonnukalai，您可以删除 li:first-of-type 规则，这样即使元素数量为偶数，布局也会恢复正常。这使得这个布局非常专业化 - 要支持可变数量的项目，您必须使用 JS 或服务器代码来操作第一个 li 上的内联样式 - 但无论如何都很棒。 - Patrick M

@PatrickM 可以通过在 CSS3 中选择从底部开始计数的第一个子元素，仅当它是奇数时来解决此问题（因此如果有奇数个子元素）li:first-child:nth-last-child(odd) http://codepen.io/anon/pen/cfvna（GCyrillus 的 fiddle 中的尾随 <ul> 会导致 Firefox 创建阴影 li 或类似的东西，必须更正为 </ul>，否则在从后往前计数时，7 个子元素中的第一个将是偶数而不是奇数...） - FelipeAls