css - 第 n 个 child 漂浮在列中

标签 css

我这里有这个html

<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">tours</a></li>
    <li><a href="#">mission</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">resources</a></li>
    <li><a href="#">explorers</a></li>
</ul>

我试图将前三个 float 在左栏中,最后三个 float 在右栏中。 我无法让它工作,它们全部对齐并且没有以正确的顺序出现。我这样标记 CSS:

li:nth-child(-n+3) {float: left;}, 
li:nth-child(n+4) {float: right;}

我错过了什么? 谢谢!

编辑以添加 html 链接:HERE IS THE PAGE

最佳答案

fiddled有点 CSS3 列。实际上,这非常简单:

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;

    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

基本上,您在包含列表上定义两列,以便第一个列表项放置在第一列中,其他列表项最终放置在第二列中。默认情况下,浏览器将列间距设置为大约 1em,因此您还需要将其设置为 0 以折叠该空间。

如您所料,browser support for this is limited to modern browsers例如 Firefox 1.5+、Safari 3+、Chrome、IE10 和 Opera 11.1+。

如果要调整列之间的平衡,可以使用column-break-before 强制在某个元素之前进行分列。例如,如果您只想要第一列中的两个元素而第二列中的其余元素,您可以添加以下代码段:

li:nth-child(3) {
    -moz-column-break-before: always;
    -webkit-column-break-before: always;
    column-break-before: always;
}

不幸的是,在撰写本文时,只有 Safari 3+、Chrome、IE10 和 Opera 11.1 支持 column-break-before。 Firefox 尚未实现此功能。

关于css - 第 n 个 child 漂浮在列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12645684/

相关文章:

css - 在 progid :DXImageTransform. Microsoft.AlphaImageLoader 中转义特殊字符

html - 如何在滚动条上淡出图像?

javascript - 将 div 缩略图切换脚本与图像缩放脚本相结合

css - 尝试将内联 block 应用于跨度

javascript - 调整外部网站内容的大小以适合 iFrame 宽度

css - Gulp:缩小 CSS 并更改导入路径中的文件名

javascript - 链接 HTML 中的 javascript 文件导致 slider 消失

css - Bootstrap 没有响应

javascript - 检查背景图片javascript时必须写完整路径

javascript - 如何使用插件 jscrolpane 修复 thead?