顯示項目與特定的順序

我有我需要在2列中按以下順序排列的不同高度的一些元件：顯示項目與特定的順序

1,2 
3,4 
5,6

我需要的div爲「彼此接觸」，這意味着＃1的底部應該觸及＃3的頂部，而不管＃2的大小。

到目前爲止，我試圖以這種方式：

HTML

<div class="block block--1">1</div> 
<div class="block block--2">2</div> 
<div class="block block--3">3</div> 
<div class="block block--4">4</div> 
<div class="block block--5">5</div> 
<div class="block block--6">6</div>

CSS：

.block { 
    display: inline-block; 
    float: left; 
    width: 50%; 
} 
.block:nth-child(odd) { 
    clear: left; 
} 
.block--1 { 
    background: red; 
    height: 100px; 
} 
.block--2 { 
    background: blue; 
    height: 150px; 
} 
.block--3 { 
    background: yellow; 
    height: 200px; 
} 
.block--4 { 
    background: green; 
    height: 100px; 
} 
.block--5 { 
    background: grey; 
    height: 200px; 
} 
.block--6 { 
    background: orange; 
    height: 300px; 
}

但這不起作用爲＃3不接觸＃1 。你可以在這裏看到：http://jsfiddle.net/oynrv880/1/

我已經嘗試使用column-count屬性，但它顯示的項目是錯誤的順序。

我該怎麼做？

非常感謝！

來源

2015-10-06 Spearfisher

你爲什麼不嘗試使用一個表呢？ – niyasc

與一個表，同一行上的項目會有相同的高度嗎？ – Spearfisher

CSS列有什麼問題？你不能改變你的HTML標記嗎？ – Abhitalks

你可以無需修改HTML最接近的可能是這樣的：

可以使奇數者左浮動和甚至是那些浮動的權利，並清除其各自的一面。

div { 
    width: 50%; 
    float: left; 
    clear: left; 
} 
div:nth-child(even) { 
    float: right; 
    clear: right; 
}

JSFiddle

來源

2015-10-06 09:19:38

在jsfiddle之間有一個4和6之間的差距6，有沒有辦法把6向上移動？ – Spearfisher

我認爲不是，因爲6開始浮動在5的水平。所以只要5開始低於4結束，我很肯定沒有解決方案，除了修改HTML或使用JS。 –

<div style="float:left; width:50%;"> 
    <div class="block block--1">1</div> 
    <div class="block block--3">3</div> 
    <div class="block block--6">6</div> 
</div> 
<div style="float:left; width:50%;"> 
    <div class="block block--2">2</div> 
    <div class="block block--4">4</div> 
    <div class="block block--5">5</div> 
</div>

刪除.block的所有CSS attibutes

來源

2015-10-06 09:06:01

你確定有這樣的事情？

.block { 
 
    width: 100%; 
 
} 
 
.block:nth-child(odd) { 
 
    clear: left; 
 
} 
 
.block--1 { 
 
    background: red; 
 
    height: 100px; 
 
} 
 
.block--2 { 
 
    background: blue; 
 
    height: 150px; 
 
} 
 
.block--3 { 
 
    background: yellow; 
 
    height: 200px; 
 
} 
 
.block--4 { 
 
    background: green; 
 
    height: 100px; 
 
} 
 
.block--5 { 
 
    background: grey; 
 
    height: 200px; 
 
} 
 
.block--6 { 
 
    background: orange; 
 
    height: 300px; 
 
} 
 

 
.first, .second { 
 
    float: left; 
 
    width: 50%; 
 
}

<div class="first"> 
 
    <div class="block block--1">1</div> 
 
    <div class="block block--3">3</div> 
 
    <div class="block block--5">5</div> 
 
</div> 
 

 
<div class="second"> 
 
    <div class="block block--2">2</div> 
 
    <div class="block block--4">4</div> 
 
    <div class="block block--6">6</div> 
 
</div>

來源

2015-10-06 09:10:11 niyasc

顯示項目與特定的順序

回答

相關問題