如何从下到上对齐 HTML 元素？

Question

How to achieve a layout in HTML that aligns elements from bottom to top?

Basic HTML structure:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Desired result:

Looking for CSS or JavaScript solution.

Answer 1

You can do this with pure CSS using Flexbox . The key property is the flex-wrap which can be set to wrap-reverse to get your desired layout.

Demo:

 .container { display: flex; flex-direction: row; flex-wrap: wrap-reverse; align-content: flex-start; /* demo */ width: 40%; min-height: 400px; border: 3px solid #000; text-align: center; margin: 0 auto; } .container div { height: 100px; width: 50%; border: 1px dashed #000; box-sizing: border-box; padding: 1em; }

 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

jsFiddle: https://jsfiddle.net/v4z38apL/1/

PS Of course, you need to consider browser support and vendor-prefixes.