使用 CSS 的计算器布局答案

【问题标题】：Calculator layout using CSS使用 CSS 的计算器布局
【发布时间】：2021-01-02 20:04:52
【问题描述】：

我想做一个计算器网络应用。

我正在使用 display: flex，但我似乎无法弄清楚如何使用 flex-grow 正确对齐底行按钮。

CSS：

main
{
    display: flex;
    flex-direction: column;
    width: 250px;
}
#display
{
    background-color: grey;
    padding: 10px;
    text-align: right;
}
.button-row
{
    display: flex;
    flex-direction: row;
    background-color: orange;
}
button
{
    padding: 20px 0px 20px 0px;
    width: 10px;
    flex-grow: 1;
}
#zero
{
    flex-grow: 2;
}

【问题讨论】：

最好使用<table>而不是flex布局。
能否提供HTML？
最好使用网格布局而不是弹性布局
@Derek.W，我们应该拥抱现代技术。 :)
flex-grow 的工作方式与您想象的不同。在这种情况下，我会简单地设置宽度。弹性百分比 - 所有按钮为 25%，除了 #zero 将获得 50%。

标签： html css

【解决方案1】：

我想说请使用响应式的 CSS Grid 布局。下面的 CSS 网格是使用 CSS Grid Generator 生成的。代码在 cmets 中解释。

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Generate 4 columns of equal 1 fraction each */
  grid-template-rows: repeat(6, 1fr); /* Generate 6 rows of equal 1 fraction each */
  font-family: sans-serif;
  font-weight: bold;
  font-size: 18px;
}

.calculator>div {
  background: #EFEFEF;
  padding: 25px;
  text-align: center;
  box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,   /* Just to fix the corner. Solution from here: https://stackoverflow.com/a/28807765/4813913 */
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;
    border-radius: 5px;
}

.calculator .div1 {
  grid-area: 1 / 1 / 2 / 5; /* Start at Row 1, Start at Column 1, End at Row 2 and End at Column 5 */
  background: #808080;
  color: #fff;
  text-align: right;
  padding-right: 20px;
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
}

.div3 {
  grid-area: 2 / 2 / 3 / 3;
}

.div4 {
  grid-area: 2 / 3 / 3 / 4;
}

.div5 {
  grid-area: 2 / 4 / 3 / 5;
}

.div6 {
  grid-area: 3 / 1 / 4 / 2;
}

.div7 {
  grid-area: 3 / 2 / 4 / 3;
}

.div8 {
  grid-area: 3 / 3 / 4 / 4;
}

.div9 {
  grid-area: 3 / 4 / 4 / 5;
}

.div10 {
  grid-area: 4 / 1 / 5 / 2;
}

.div11 {
  grid-area: 4 / 2 / 5 / 3;
}

.div12 {
  grid-area: 4 / 3 / 5 / 4;
}

.div13 {
  grid-area: 4 / 4 / 5 / 5;
}

.div14 {
  grid-area: 5 / 1 / 6 / 2;
}

.div15 {
  grid-area: 5 / 2 / 6 / 3;
}

.div16 {
  grid-area: 5 / 3 / 6 / 4;
}

.div17 {
  grid-area: 5 / 4 / 6 / 5;
}

.div18 {
  grid-area: 6 / 1 / 7 / 3;
}

.div19 {
  grid-area: 6 / 3 / 7 / 4;
}

.div20 {
  grid-area: 6 / 4 / 7 / 5;
}

<div class="calculator">
  <div class="div1"> Display </div>
  <div class="div2"> AC </div>
  <div class="div3"> ± </div>
  <div class="div4"> % </div>
  <div class="div5"> / </div>
  <div class="div6"> 7 </div>
  <div class="div7"> 8 </div>
  <div class="div8"> 9 </div>
  <div class="div9"> * </div>
  <div class="div10"> 4</div>
  <div class="div11"> 5 </div>
  <div class="div12"> 6</div>
  <div class="div13"> - </div>
  <div class="div14"> 1</div>
  <div class="div15"> 2</div>
  <div class="div16"> 3</div>
  <div class="div17"> + </div>
  <div class="div18"> 0 </div>
  <div class="div19"> , </div>
  <div class="div20"> = </div>
</div>

【讨论】：