如何将一个元素对齐到另一个元素的正下方，但在侧面有一些间距？

Question

如何将一个元素对齐到另一个元素的正下方，但在侧面留出一些间距？

Answer 1

对此有许多潜在的解决方案，包括更现代的 CSS Grid Layout. I have chosen to implement this using Flexbox。首先，我创建了一个简单的布局，将编号的框（我称之为图块）分成两列。我将这些列设置在一个行包装器中。然后我将 flexbox 属性应用于行和列，以便列和其中的图块根据视口大小正确排列。许多其他属性可能需要根据您的特定实现进行调整，但您所提供的只是一张图片，不足以描述您想要的内容。下次提问时，请出示代码，说明您已经尝试过的内容，并完整解释您尝试执行的操作的参数。诸如图块是否具有固定大小或是否需要能够随视口缩小等细节很有帮助。我的解决方案如下，我会尽力回答您的任何问题。

*,
:before,
:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 100%;
}

.row {
  border: 2px solid #000;
  margin: 1rem 10rem;
  padding: 1.5rem;
  min-width: 51.5rem;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.col {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.col--left {
  margin: 0 1.5rem 1.5rem 0; 
}

.col--right {
  flex-wrap: wrap;
  width: 31.5rem; /* double tile width + gap width */
}

.tile {
  border: 2px solid #000;
  height: 6.25rem;
  width: 15rem;
  font-size: 1.75rem;
  text-align: center;
  line-height: 6.25rem;
}

<div class="row">
  <div class="col col--left">
    <div class="tile">1</div>
  </div>
  <div class="col col--right">
    <div class="tile">2</div>
    <div class="tile">3</div>
    <div class="tile">4</div>
  </div>
</div>

你可以view the above example on my CodePen.

Answer 2

为此使用 grid：

.container {
  padding: 10px;
  border: solid 1px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  align-content: flex-start;
}

.item {
  padding: 20px;
  border: solid 1px;
  text-align: center;
}

.item2 {
  grid-column: 3 / 4;
}

.item4 {
  grid-column: 3 / 4;
}

<div class="container">
  <div class="item">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

如何将一个元素对齐到另一个元素的正下方，但在侧面有一些间距？

How can I align an element right below another one but with some spacing to the side?

html

css

flexbox