我可以將少量元素從色譜柱流出嗎？

希望我在標題中寫下了這個問題，我會繼續下去，因爲我用詞不太好，我會盡量保持簡單。我可以將少量元素從色譜柱流出嗎？

所以我想要完成的是具有唯一ID設置爲以列顯示的項目列表。如果特定的id有它自己的風格（浮動並用背景創建塊），如果列流/渲染（是適當的術語？），我需要把它弄出來。這是可能的和如何（試圖避免JS/jQuery）？此代碼：

div { 
 
    height: 200px; 
 
} 
 
ul { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
} 
 
#unique1, 
 
#unique2 { 
 
    float: left; 
 
    display: block; 
 
    width: 20%; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<div> 
 
    <ul> 
 
    <li id="unique1">text</li> 
 
    <li id="unique2">text</li> 
 
    <li id="unique3">text</li> 
 
    <li id="unique4">text</li> 
 
    <li id="unique5">text</li> 
 
    <li id="unique6">text</li> 
 
    <li id="unique7">text</li> 
 
    <li id="unique8">text</li> 
 
    <li id="unique9">text</li> 
 
    <li id="unique10">text</li> 
 
    </ul> 
 
</div>

接下來的一段代碼，以顯示我想達到的目標。

div { 
 
    height: 200px; 
 
} 
 
ul { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
} 
 
#unique1, 
 
#unique2 { 
 
    float: left; 
 
    display: block; 
 
    width: 20%; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<div> 
 
    <div id="unique1">text</div> 
 
    <div id="unique2">text</div> 
 
    <ul> 
 
    <li id="unique3">text</li> 
 
    <li id="unique4">text</li> 
 
    <li id="unique5">text</li> 
 
    <li id="unique6">text</li> 
 
    <li id="unique7">text</li> 
 
    <li id="unique8">text</li> 
 
    <li id="unique9">text</li> 
 
    <li id="unique10">text</li> 
 
    </ul> 
 
</div>

來源

2016-02-14 uldo

你想達到的最終結果是什麼......你能分享一個截圖嗎？ –

問題與我認爲。使小提琴 –

增加。我忘了添加期望的最終結果。@ ImranBughio謝謝。 – uldo

你不能用CSS獨自做到這一點。你必須使用Javascript或jQuery：

$('ul > li').each(function() { 
    if ($(this).css('float') == 'left') { 
     $(this).parent().before(this); 
    } 
});

來源

2016-02-14 08:35:46

我可以將少量元素從色譜柱流出嗎？

回答

相關問題