无间距地垂直排列元素 [英] Arrange elements vertically without spacing

问题描述

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

div[class^="elm"]{宽度:50%；显示:内联块；底边距:20px；背景颜色:灰色；}.榆树1{高度:100px；}.elm2{高度:200px；}.elm3{高度:160px；}.elm4{高度:110px；}.elm5{高度:60px；}.elm6{高度:220px；}.elm7{高度:90px；}

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

并像这样显示(顺序很重要):

我知道这种事情可能发生在两个街区.每个用于一列，但它让我在响应式设计中使用 javascript(使其超过两列).

示例 Google+ 使用由 javascript 更改的多块来执行此操作.不使用 javascript 而只使用 CSS 怎么办?

解决方案

您可以通过在 float: left 和 float: right 之间交替来实现:

.items {显示:块；溢出:隐藏；宽度:400px；}.物品 {box-sizing: 边框框；宽度:190px；边距:5px；填充:5px；背景:#000；颜色:#fff;文本对齐:居中；font-family: 'Arial', 'Helvetica', sans-serif;字体大小:48pt；字体粗细:粗体；}.item:nth-child(odd) {向左飘浮;}.item:nth-child(even) {浮动:对；}.elm1 {高度:100px；}.elm2 {高度:200px；}.elm3 {高度:160px；}.elm4 {高度:110px；}.elm5 {高度:60px；}.elm6 {高度:220px；}.elm7 {高度:90px；}

<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>

希望这会有所帮助.

编辑:这仍然可能失败，具体取决于瓷砖的高度，如下所示:https://jsfiddle.net/f16apso8/ - 这里提供了更好的(实际)解决方案:如何使用 CSS 创建网格/平铺视图?

How can I arrange elements with different heights vertically? I mean using something like this:

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;
}

<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>

and showing it like this (ordering is important):

I know this type of thing can happening with two blocks. each for one column but it makes me to use javascript in responsive design (for making it more than two columns).

Example Google+ doing it with multi block that changes by javascript. How can I do it without using javascript and only CSS?

解决方案

You can do this by alternating between float: left and 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>

Hope this helps.

EDIT: This can still fail, depending on the heights of the tiles, as can be seen here: https://jsfiddle.net/f16apso8/ - better (actual) solutions are present here: How to Create Grid/Tile View with CSS?

这篇关于无间距地垂直排列元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！