html - 我该怎么做才能让我有 4 行并且结果类使用 flexbox 位于顶部？

Question

我正在尝试制作一个非常简单的计算器，但它并没有按照我想要的方式出现。有任何想法吗？它应该是 4 行 a，顶部是 0，以便稍后显示结果。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 2px solid red;
}

.square {
  border: 2px solid black;
  width: 7%;
  text-align: center;
}

<div class="result">
  <h1>0</h1>
</div>

<div id="container">
  <div class="square row1">
    <h2>0</h2>
  </div>
  <div class="square row1" "><h2>1</h2></div>
<div class="square row1 "">
    <h2>2</h2>
  </div>
  <div class="square row1" "><h2>3</h2></div>
<div class="square row1 "">
    <h2>4</h2>
  </div>

  <div class="square row2" "><h2>5</h2></div>
<div class="square row2 "">
    <h2>6</h2>
  </div>
  <div class="square row2" "><h2>7</h2></div>
<div class="square row2 "">
    <h2>8</h2>
  </div>
  <div class="square row2" "><h2>9</h2></div>

<div class="square row3 "">
    <h2>C</h2>
  </div>
  <div class="square row3" "><h2>.</h2></div>
<div class="square row3 "">
    <h2>+/-</h2>
  </div>
  <div class="square row3" "><h2>*</h2></div>
<div class="square row3 "">
    <h2>\</h2>
  </div>

  <div class="square row4" "><h2>-</h2></div>
<div class="square row4 "">
    <h2>+</h2>
  </div>
  <div class="square row4" "><h2>=</h2></div>  
</div>

这只是多余的话，因为它需要更多细节

Answer 1

看起来您的某些代码无效，这将成为问题的一部分。在您的许多类定义中，引号的数量不正确。我已经自由地解决了这些问题，但也更新了标记的语义以更好地与其用例保持一致。这意味着将数字 div 更新为 button 并将页面上的 h1 和 h2 交换为 span .

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap {
  display: flex;
  flex-direction: column;
}

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  border: 2px solid red;
}

.square {
  border: 2px solid black;
  text-align: center;
}

.result {
  align-self: end;
}

<div class="wrap">
  <div class="result">
    <span>0</span>
  </div>

  <div id="container">
    <button class="square">
      <span>0</span>
    </button>
    <button class="square">
      <span>1</span>
    </button>
    <button class="square">
      <span>2</span>
    </button>
    <button class="square">
      <span>3</span>
    </button>
    <button class="square">
      <span>4</span>
    </button>

    <button class="square">
      <span>5</span>
    </button>
    <button class="square">
      <span>6</span>
    </button>
    <button class="square">
      <span>7</span>
    </button>
    <button class="square">
      <span>8</span>
    </button>
    <button class="square">
      <span>9</span>
    </button>

    <button class="square">
      <span>C</span>
    </button>
    <button class="square">
      <span>.</span>
    </button>
    <button class="square">
      <span>+/-</span>
    </button>
    <button class="square">
      <span>*</span>
    </button>
    <button class="square">
      <span>\</span>
    </button>

    <button class="square">
      <span>-</span>
    </button>
    <button class="square">
      <span>+</span>
    </button>
    <button class="square">
      <span>=</span>
    </button>
  </div>
</div>

我删除了您的 flexbox 修复程序并将其替换为 CSS Grid。这允许我们定义一个网格一次，让元素流入其中。

通过在父级 #container 上定义 CSS 网格，我们可以根据您的要求设置 5 列(4 行)。这会将每个 child 对齐到一列中。 fr 是一个小数单位，因为有 5 个，所以它会将可用空间平均分成 5 列。

我还在所有内容周围添加了 .wrap div，以便我们定位您的 .result 输出。通过将 display: flex; 和 flex-direction: column; 添加到 .wrap div 我们可以对齐 .result 和 #container 要堆叠的 div。然后通过在 .result div 上设置 align-self: end;，我们可以将输出向右移动，就像它在大多数计算器上显示的那样。

这是代码笔中的所有代码:https://codepen.io/goodwinc/pen/ZEzBWoJ