是否有可能確定您是否位於css定義的列的最後一行？

-1

我正在使用新的css樣式列將單個ul分成多個列。我希望用javascript或CSS選擇每列中的最後一個元素。是否有可能確定您是否位於css定義的列的最後一行？

HTML：

<ul> 
    <li /> 
    <li /> 
    <li><h4 /></li> 
    ... 
</ul>

CSS：

ul{ 
    column-count: 6; 
}

有時候線項目與H4：■在它們作爲該行的最後一個項目，爲孤兒結束。我想解決這個問題，並一直在尋找兩種選擇。

使用css孤兒屬性，但由於標記，我不認爲它會起作用，它不是在Firefox和Safari不支持，支持是不是必須的，但會很好。

向列末尾的任何h4添加一些頂部邊距/填充，但我不知道如何使用css或javascript/jquery選擇它們。我寧願保留標記，但如果不可行，我可以改變它。

來源

2014-10-31 Himmators

我很難理解你需要選擇什麼。這是最後一個嗎？ – 2014-10-31 09:50:59

爲清晰起見更新！ – Himmators 2014-10-31 10:03:29

@KristofferNolgren我已經發布了另一個答案，檢查這個小提琴：http://jsfiddle.net/pqse3er1/ – 2014-10-31 10:13:05

CSS中的列無法識別內容。只有兩個屬性可以幫助你的列是填充（只適用於firefox）和內部入侵。

列填充將通過基於容器高度的列分配內容。

頁面中斷將爲列顯示什麼，清除浮動內容，阻止列間卡住的元素。它在瀏覽器中有不同的語法。

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ 
      page-break-inside: avoid; /* Firefox */ 
       break-inside: avoid; /* IE 10+ */

但無論如何，當你有文字的容器，並想把它分成列，沒有任何額外的標記列是更有幫助。由於您使用的是li，並且div中沒有文本，所以我建議您使用浮動來實現您正在尋找的多列布局。

來源

2014-10-31 10:01:01 nunopolonia

您可以使用：last-child選擇器來選擇最後一個LI元素。

li:last-child{color:red;}

來源

2014-10-31 09:54:58 WisdmLabs

它不是ul中的最後一個元素，它是列 – Himmators 2014-10-31 09:58:47

@ web-tiki中編輯答案的最後一項。 – WisdmLabs 2014-10-31 10:11:09

這不是問題的答案 – Himmators 2014-10-31 10:16:58

你的問題還不清楚。

如果你想知道，如果你的元素（例如h4）是在最後li不是使用CSS：

ul li:last-of-type h4

如果你想知道這個在JS，但withou使用pseudoselector比你可以使用：

$(function() { 
    var $li = $('ul > li'), 
     count = $li.length - 1, 
     cssClass = 'last'; 

    $li.eq(count).addClass(cssClass);; 
});

，從這裏使用CSS ul li.last h4

工作小提琴：http://jsfiddle.net/Lwuzgm08/2/

來源

2014-10-31 09:55:16

它不是最後一個元素，它是列中的最後一項。 – Himmators 2014-10-31 09:58:26

所以刪除h4，你會選擇最後一列lawl。無論如何，添加jQuery解決方案 – 2014-10-31 09:59:53

-1

是的，你可以從你的html中刪除孤兒h4標籤。以下是執行相同操作的簡單腳本。

$('h4').each(function() { 
    var $this = $(this); 
    if($this.html().replace(/\s|&nbsp;/g, '').length == 0) 
     $this.remove(); 
});

來源

2014-10-31 09:55:37

爲什麼要爲此投票？ – 2014-10-31 10:00:09

-1

如果你想在每列選擇最後一個元素（假設li是列），可以使用下面的CSS

ul > li h4:last-of-type

或jQuery的：

$('ul > li h4:last-of-type')

提供了小提琴：http://jsfiddle.net/pqse3er1/1/

來源

2014-10-31 10:12:47

它不是ul中的最後一個元素，它是列中的最後一項 – Himmators 2014-10-31 10:16:33

定義庫侖 – 2014-10-31 10:16:57

列是將內容制動成列的css屬性。 – Himmators 2014-10-31 10:18:00

是否有可能確定您是否位於css定義的列的最後一行？

回答

相關問題