显示项目与特定的顺序

我有我需要在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

显示项目与特定的顺序

回答

相关问题