針對第n列（由列數制）

比方說，我有這個針對第n列（由列數制）

<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選擇器？

來源

2014-01-06 foxx

是否總是有一定數量的元素？或者它是動態的，這樣每列中的元素數量可能會發生變化？ –

對我們而言的任何反饋？ –

你走了... – foxx

截至目前，沒有辦法針對純CSS n列。

來源

2014-01-20 15:48:01 foxx

使用nth-child selector像this

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

來源

2014-01-06 17:53:03

不行，我需要將第一列的所有元素對齊到右邊，第二列的所有元素都在左邊。這隻會對齊第一列的第一個和第二個元素。 – foxx

您可以使用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你想要的以及不搞亂其他對齊屬性

來源

2014-01-06 18:45:07

嗯，我a）不想使用JavaScript b）兩列都在您的演示中左對齊...整點我做這個_experiment_因爲我試圖做到這一點http：// imgur .com/Bf6wPhW使用css列。這個想法是有50％的寬度，所以邊界看起來連接，左/右對齊將照顧對中。 – foxx

目前還不清楚，如果你想對齊整個列或內部的元素。

如果你想要第一個，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; 
}

它是基於在asumption這三元素都具有相同的高度，所以第2列將從中間元素開始。

該解決方案有2個問題。

首先，編寫起來很麻煩，因爲您需要列表中每個元素的規則。

其次，它在瀏覽器，在那裏它不正確計算的元素（這就是爲什麼我添加了額外的樣式顯示是怎麼回事）

demo

一個更好的當前版本中的錯誤演示

dynamic demo

來源

2014-01-06 20:13:40 vals

是的，這將工作，但項目的數量是可變的，這就是爲什麼我正在尋找一種方法來定位每列或第n列的所有元素。 – foxx

添加了一個動態創建元素的演示。在IE和Firefox中可以正常工作，目前在Chrome中有一個bug – vals

然後，我只想使用css。我認爲正確的答案是，不可能將第n列作爲目標。所有這些只是一些解決方法，可以讓它有所作爲，但讓我們誠實的說，如果純CSS無法實現，那麼可能有更好的方法來做到這一點，只需要有兩個列表，或者添加一個特殊的類到那些應該以兩種不同的方式對齊。 – foxx

針對第n列（由列數制）

回答

相關問題