n个子漂浮在列

我这里有这个网站n个子漂浮在列

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

我想取前三，浮它留在左栏最后三个浮动权利。我无法使它正常工作，它们全部对齐，并且没有以正确的顺序出现。我标记了这样的CSS：

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

我错过了什么？谢谢！

编辑添加的HTML链接：HERE IS THE PAGE

来源

2012-09-28 Kim

在你的第一行结尾是否有逗号在这个问题中出错？否则，这是你的一个显示错误的原因。 – BoltClock

定义工作，你想要什么/期望看到什么？ – ultranaut

对不起，该页面在这里：http://kimwilddesigns.com/TrailGuide_website/TrailGuide_website-class/index_fluid.html 缩小到智能手机的宽度，我想列出2列。第一列有家庭旅行和任务。我把背景颜色放在那里，以便更好地看到它。谢谢。 – Kim

我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尚未实现此功能。

来源

2012-09-28 19:19:00

嗨，感谢您的建议并回复！我试图使用简单的第n个孩子，因为css3列尚未得到广泛支持。所以我想它不可能？ – Kim

@Kim恐怕不是。您可以使用浮动功能进行很多操作，但是当所需的显示顺序与来源顺序差别很大时，它们就会短缺。 –

你的确可以使用第n个孩子。这是我最近碰到的一个例子。它设置了多个屏幕宽度并进行相应调整：http://codepen.io/bradfrost/full/xkcBn

它使用简单的无序列表。

来源

2014-05-01 15:21:34

n个子漂浮在列

回答

相关问题