CSS - 将新DIV置于旧DIV之上

Question

我正在尝试使用＆＃34; vertical-align：bottom;＆＃34;将DIV从包装器/父DIV的底部移到顶部。唯一的问题是我希望第一个DIV显示在底部，而不是像往常一样默认显示在顶部。这只是因为我总是希望通过在最底部输入第一行来填充底行。

DIV的顺序实际上并不重要，但我真的想要最底层的行＃34;要完全填充顶行，唯一一个有时在顶部只有1或2个盒子的例子。通过在顶部而不是在底部添加新框，将导致我所描述的布局。我希望这是有道理的。

此外，我在下面添加的代码显示了每个＆＃34;列之间的差距＆＃34;我一直试图删除。如果我必须更改所有代码以解决第一个问题，但是如果有人知道为什么这样并且让我知道，这可能没关系，那会很棒：）

谢谢！

这是我到目前为止所做的：

＆＃13;

＆＃13;

div.wrapper {
	display: table-cell; 
	vertical-align: bottom; 
	height: 500px;
	width: 640px;
	background-color: lightgrey;
}
div.wrapper div {
	width: 200px; 
	height: 50px;
	display: inline-block;
}
div.wrapper div p {
	margin: 0px;
	padding: 0px;
}		

＆＃13;

<div class="wrapper">
	<div style="background-color: #7E7ECC;">
		<p>1</p>
	</div>
	<div style="background-color: #FFA347;">
		<p>2</p>
	</div>
	<div style="background-color: #80E680;">
		<p>3</p>
	</div>
	<div style="background-color: #FF99C2;">
		<p>4</p>
	</div>
	<div style="background-color: #A6DBEE;">
		<p>5</p>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是我想要创造的：

这也是可以接受的：

Answer 1

你可以使用CSS3 flexbox布局。 flex-wrap: wrap-reverse是此处的关键属性，因为它允许项目以flex-direction: row

的相反方向换行

align-content: flex-start代替*-end，因为换行顺序已被颠倒。

div.wrapper {
  /* Added Properties */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;  
  align-content: flex-start;
  /* ^ Added Properties */
  background-color: lightgrey;
  height: 150px;
  vertical-align: bottom;
  width: 640px;
}
div.wrapper div {
  width: 200px;
  height: 50px;
  display: inline-block;
}
div.wrapper div p {
  margin: 0px;
  padding: 0px;
}

<div class="wrapper">
  <div style="background-color: #7E7ECC;">
    <p>1</p>
  </div>
  <div style="background-color: #FFA347;">
    <p>2</p>
  </div>
  <div style="background-color: #80E680;">
    <p>3</p>
  </div>
  <div style="background-color: #FF99C2;">
    <p>4</p>
  </div>
  <div style="background-color: #A6DBEE;">
    <p>5</p>
  </div>
</div>

Answer 2

您可以解决此问题，将flex布局添加到包装并在行中显示项目，您要将其反转以获得堆叠效果。见下面的CSS：

div.wrapper {
    display: table-cell; 
    vertical-align: bottom; 
    height: 500px;
    width: 640px;
    background-color: lightgrey;
    display: flex; /* added */
    flex-direction: row; /* added */
    flex-wrap: wrap-reverse; /* added */
    align-content: flex-start; /* added */
}
div.wrapper div {
    width: 200px; 
    height: 50px;
    display: inline-block;  
}

div.wrapper div p {
    margin: 0px;
    padding: 0px;
}

这是FIDDLE