按類別將項目分爲2列

本質上，我需要一組可以按任意順序排列的元素（可以是列表或div，如下所示），但會根據其類別自動移動到指定列。例如，我的HTML可能是：按類別將項目分爲2列

<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="right"></div> 
<div class="left"></div>

假設每個類別的背景色：

.left{ background:red } 
.right{ background:blue }

而且我會希望達到一個佈局附加的圖像（其中的元件將延伸到適合各自內容的高度）：

顯然，如果我只是浮動左邊或右邊的元素，他們將與前一個元素內聯，無論我想將其浮動到哪個「列」的高度。

我想過flexbox，並想知道是否可以指定2列並將每個元素左對齊或右對齊，但我認爲不可能指定單個項目的對齊方式。

我得出的結論是，這是不可能的，短的使用JavaScript來動態地將項目分類成列（例如類似於石工算法），但我想我會問這裏的問題以防有人提出任何建議。

來源

2016-10-26 Alex

-1

你可以使用jQuery輕鬆實現這一點。創建兩個div「左」和「右」然後根據他們的階級

if ($("#mydiv").hasClass("left")){ 
$("#mydiv").appendTo(".left-container"); 
}

來源

2016-10-26 16:24:39 felix91

請不要建議jQuery的解決方案，沒有標記爲這樣的問題。 –

我知道我可以用javascript做到這一點，但我希望純粹的CSS解決方案，謝謝 – Alex

-1

使用常見的類名進行的所有DIV appendTo孩子的div /元素，並根據您的要求加左或者右類也

if($('.parentDiv).hasClass('left')) { 
    $('.parentDiv).css("float", "left");    
} else { 
    $('.parentDiv').css("float", "right");    
}

來源

2016-10-26 16:58:51 karthick

您可能需要提供一個片段，以顯示這實際上工作。 –

我不認爲這有效，加上它使用JavaScript。而且，這個js看起來沒有必要 - 你只是告訴左邊的一個項目向左浮動。爲什麼不在純CSS中做到這一點？ – Alex

基本思路是使用order屬性將「左」元素移動到開始位置，將「右」元素移動到結尾。然後我們添加一個breaker元素，這個元素足夠高，可以強制中斷。

.block { width: 200px; margin: 20px; } 
 
.left { order: 1; background: pink; } 
 
.right { order: 3; background: cyan; } 
 
.container { display: flex; flex-direction: column; flex-wrap: wrap; height: 1000px; } 
 
.breaker { order: 2; flex-basis: 100%; }

<div class="container"> 
 
    <div class="left block">Now is the time for all good men.</div> 
 
    <div class="right block">Ipsum lorem.</div> 
 
    <div class="right block">ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div> 
 
    <div class="left block"> occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum</div> 
 
    <div class="left block">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> 
 
    <div class="breaker"></div> 
 
</div>

來源

2016-10-26 18:23:03

這很有意思，謝謝！我一直在玩這個。我能看到的唯一缺點是容器必須具有指定的高度，這意味着您需要事先知道內容的高度，或者使用JS計算它，是嗎？ – Alex

按類別將項目分爲2列

回答

相關問題