定位第 n 列（按列计数）答案

【问题标题】：Targeting nth column (made by column-count)定位第 n 列（按列计数）
【发布时间】：2014-01-24 04:20:54
【问题描述】：

假设我有这个

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>


ul {
   column-count: 2;
}

我想将第一列向右对齐，第二列向左对齐，有没有办法使用 css 选择器来定位其中一个列？

【问题讨论】：

元素的数量总是固定的吗？或者它是动态的，因此每列中的元素数量可能会发生变化？
nth-column 伪选择器有望很快推出

标签： css css-multicolumn-layout

【解决方案1】：

到目前为止，没有办法用纯 css 定位第 n 列。

【讨论】：

【解决方案2】：

您可以使用column-gap 做您想做的事，但由于不能使用calc(100% - liWidth * colCount) 作为column-count 的值，您现在必须使用一些javascript

function calcGap() {
    var gap = window.innerWidth - (columnCount * listWidth) + "px";
    ul.style.webkitColumnGap = gap;
    ul.style.columnGap = gap;
}
calcGap(); // Fire on load
window.onresize = calcGap; // Fire on window resize

Demo

使用此方法，您可以拥有任何您想要的text-align，并且不会弄乱其他对齐属性

【讨论】：

好吧，我 a) 不想使用 javascript b) 在您的演示中，两列都向左对齐...我这样做的重点是 experiment是我正在尝试使用 css 列做到这一点imgur.com/Bf6wPhW。这个想法是让 li 有 50% 的宽度，所以边框看起来是相连的，左/右对齐会负责居中。

【解决方案3】：

不清楚是整列对齐还是里面的元素对齐。

如果你想要第一个，Zach Saucier 的答案就是方法。

如果是后者，并且你想要一个纯 CSS 的解决方案，它会是这样的：

.container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
}

li {
    text-align: right;

}

li:nth-last-child(6) ~ li:nth-child(n+4) {
    text-align: left;
    background-color: lightblue;
}
li:nth-last-child(8) ~ li:nth-child(n+5) {
    text-align: left;
    background-color: lightblue;
}

li:nth-child(n+4) {
    color: red;
}

li:nth-last-child(6) {
    border: solid 1px green;
}

这是基于元素将具有相同高度的假设，因此第二列将从中间元素开始。

这个解决方案有两个问题。

首先，编写起来很麻烦，因为您需要为列表中的每个元素数量制定规则。

其次，它在当前版本的 Chrome 中有一个错误，它不能正确计算元素（这就是为什么我添加了额外的样式来显示正在发生的事情）

demo

更好的演示

dynamic demo

【讨论】：

是的，可以，但是项目的数量是可变的，这就是为什么我一直在寻找一种方法来定位每列或第 n 列的所有元素。
添加了动态创建元素的演示。在 IE 和 Firefox 中运行正常，目前在 Chrome 中有一个错误
再一次，我只想使用 css。我认为正确的答案是不可能用 css 定位第 n 列。所有这些只是使它有点工作的解决方法，但老实说，如果纯 css 不可能，那么可能有更好的方法来做到这一点，只需有两个列表，或者为那些应该的列表添加一个特殊的类以不同的方式对齐它们中的两个。

【解决方案4】：

像this一样使用nth-child selector

ul li:nth-child(1) {
  text-align: right;
}
ul li:nth-child(2) {
  text-align: left;
}

【讨论】：

不行，我需要将第一列的所有元素向右对齐，第二列的所有元素向左对齐。这只会对齐第一列的第一个和第二个元素。