垂直排列元素，没有间距

Question

如何垂直排列不同高度的元素？我的意思是使用这样的东西：

＆＃13;

＆＃13;

div[class^="elm"]{
	width: 50%;
	display: inline-block;
	margin-bottom: 20px;
	background-color: gray;
}
	
.elm1{
	height: 100px;
}
	
.elm2{
	height: 200px;
}
	
.elm3{
	height: 160px;
}
	
.elm4{
	height: 110px;
}
	
.elm5{
	height: 60px;
}
	
.elm6{
	height: 220px;
}
	
.elm7{
	height: 90px;
}

＆＃13;

<div class="elm1">Element 1</div><div class="elm2">Element 2</div><div class="elm3">Element 3</div><div class="elm4">Element 4</div><div class="elm5">Element 5</div><div class="elm6">Element 6</div><div class="elm7">Element 7</div>

＆＃13;

＆＃13;

＆＃13;

并显示如下（排序很重要）：

我知道这种事情可能发生在两个街区。每个列都有一列，但它让我在响应式设计中使用javascript（使其超过两列）。

示例 Google+使用javascript更改的多个块执行此操作如果不使用javascript而只使用CSS，我怎么能这样做？

Answer 1

您可以在float: left和float: right：

之间轮流执行此操作

.items {
  display: block;
  overflow: hidden;
  width: 400px;
}

.item {
  box-sizing: border-box;
  width: 190px;
  margin: 5px;
  padding: 5px;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 48pt;
  font-weight: bold;
}

.item:nth-child(odd) {
  float: left; 
}

.item:nth-child(even) {
  float: right;
}

.elm1 {
  height: 100px;
}
	
.elm2 {
  height: 200px;
}
	
.elm3 {
  height: 160px;
}
	
.elm4 {
  height: 110px;
}
	
.elm5 {
  height: 60px;
}
	
.elm6 {
  height: 220px;
}
	
.elm7 {
  height: 90px;
}

<div class="items">
  <div class="item elm1">1</div>
  <div class="item elm2">2</div>
  <div class="item elm3">3</div>
  <div class="item elm4">4</div>
  <div class="item elm5">5</div>
  <div class="item elm6">6</div>
  <div class="item elm7">7</div>
</div>

希望这有帮助。

编辑：这仍然可能会失败，具体取决于切片的高度，如下所示：https://jsfiddle.net/f16apso8/ - 此处有更好的（实际）解决方案：{{3} }

Answer 2

这个输出是否是你期待的

这可能会对你有所帮助

Check output in Codepen.io

＆＃13;

＆＃13;

div[class^="elm"] {
  width: 50%;
  display: block;
  background-color: gray;
}

.elm1 {
  height: 100px;
  margin: 2px;
}

.elm2 {
  height: 200px;
  position: relative;
  left: 10px;
  top: -105px;
  float: right;
}

.elm3 {
  height: 160px;
  margin: 2px;
}

.elm4 {
  height: 110px;
  margin: 2px;
  position: relative;
  left: 10px;
  top: -105px;
  float: right;
}

.elm5 {
  height: 60px;
}

.elm6 {
  height: 220px;
  margin: 2px;
  position: relative;
  left: 10px;
  top: -105px;
  float: right;
}

.elm7 {
  height: 90px;
  margin: 2px;
}

＆＃13;

<div class="elm1">Element 1</div>
<div class="elm2">Element 2</div>
<div class="elm3">Element 3</div>
<div class="elm4">Element 4</div>
<div class="elm5">Element 5</div>
<div class="elm6">Element 6</div>
<div class="elm7">Element 7</div>

＆＃13;

＆＃13;

＆＃13;