我要怎么做这个 CSS

Question

我要怎么把这个变成这个

我尝试使用justify-content: space between; 并将块分开，但我如何将 3 和 4 对齐到容器底部

CSS 代码

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

Answer 1

假设所有这些尺寸都是硬编码的，你可以这样做。

 * { box-sizing: border-box; }.container { width: 240px; height: 200px; border: 1px solid gray; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; }.container > div { width: 80px; height: 50px; border: 1px solid red; flex-shrink: 0; }.container > div:nth-child(1), .container > div:nth-child(2), .container > div:nth-child(5) { order: -1; }.container > div:nth-child(5) { margin-inline: 80px; }

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

Answer 2

如果只有你的内盒尺寸是固定的，你可以使用这个解决方案。

 .parent { display: flex; justify-content: space-between; width: 100%; height: 80vh; border: 1px solid black; position: relative; resize: both; } div { display: inline-block; width: 100px; height: 30px; border: 1px solid red; }.three { position: absolute; bottom: 0%; }.four { position: absolute; bottom: 0%; right: 0%; }.five { position: absolute; bottom: 50%; right: 50%; transform: translate(50%, 50%); }

 <div class="parent"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> </div>