Question

我正在尝试使用CSS网格系统构建计算器界面，但是正如您看到的那样，两个具有数字和 ops id的键盘部分不适合键盘部分，尽管我为数字部分分配了54％的键盘宽度，为操作部分分配了46％的键盘部分宽度，为键盘部分分配了两列，但是它们仍然不适合键盘部分。

rangeSelector: {
  selected: 5
}

body {
    margin: 0;
    font-size: 16px;
}

.key {
    font-size: 1.5em;
}

#result {
    text-align: right;
    font-size: 3.5em;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 28%;
    background: #EEE;
    color: #444;
    font-family: DigitalNumbers;
}

#app{
    height: 70%;
    width: 80%;
    max-width: 580px;
    min-height: 280px;
    background: bisque;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);


}


.keyy{
    grid-area: plus;
}

#keypad{
    display: grid;
    grid-template-areas: 'auto auto';
    height: 72%;
    width: 100%;
    color: #DDD;
    font-family: RobotoCondensed;

}

#nums{
    display: grid;
    grid-template-areas: 
    '. . .'
    '. . .'
    '. . .'
    '. . .';
    height: 100%;
    width: 54%;
}

#ops{
    display: grid;
    grid-template-areas: 
    '× .'
    '- .'
    'plus .'
    'plus .';
    width:46%;
    height: 100%;
}

div#nums div:nth-child(odd){
    background: #095057;
}

div#nums div:nth-child(even){
    background: #19676E;
}

div#ops div:nth-child(odd){
    background: #D34E47;
}

div#ops div:nth-child(even){
    background: #B52D26;
}

Answer 1

您拥有它：

您只需要在网格设置中使用它，就可以确定列的起点：

grid-template-columns: 54% [col-start] 46% [col-start];

并删除数字和操作的宽度：

body {
    margin: 0;
    font-size: 16px;
}

.key {
    font-size: 1.5em;
}

#result {
    text-align: right;
    font-size: 3.5em;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 28%;
    background: #EEE;
    color: #444;
    font-family: DigitalNumbers;
}

#app{
    height: 70%;
    width: 80%;
    max-width: 580px;
    min-height: 280px;
    background: bisque;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);


}


.keyy{
    grid-area: plus;
}

#keypad{
    display: grid;
    grid-template-areas: 'auto auto';
    grid-template-columns: 54% [col-start] 46% [col-start];
    height: 72%;
    width: 100%;
    color: #DDD;
    font-family: RobotoCondensed;

}

#nums{
    display: grid;
    grid-template-areas: 
    '. . .'
    '. . .'
    '. . .'
    '. . .';
    height: 100%;
}

#ops{
    display: grid;
    grid-template-areas: 
    '× .'
    '- .'
    'plus .'
    'plus .';
    height: 100%;
}

div#nums div:nth-child(odd){
    background: #095057;
}

div#nums div:nth-child(even){
    background: #19676E;
}

div#ops div:nth-child(odd){
    background: #D34E47;
}

div#ops div:nth-child(even){
    background: #B52D26;
}

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
    <meta charset="UTF-8">
    <style type="text/css">


    </style>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="app">
    <div id="result">0</div>
    <div id="keypad">
        <div id="nums">
            <div class="key">7</div>
            <div class="key">8</div>
            <div class="key">9</div>
            <div class="key">4</div>
            <div class="key">5</div>
            <div class="key">6</div>
            <div class="key">1</div>
            <div class="key">2</div>
            <div class="key">3</div>
            <div class="key">0</div>
            <div class="key">.</div>
            <div class="key">=</div>
        </div>
        <div id="ops">
            <div class="key">×</div>
            <div class="key">-</div>
            <div class="keyy">+</div>
            <div class="key">÷</div>
            <div class="key">CM</div>
            <div class="key">M-</div>
            <div class="key">M+</div>
        </div>
    </div>
</div>
</body>
</html>

有了这个，您将得到这个模型：

希望它对您有用！

Answer 2

您已经将它们分配为键盘的子代，不需要宽度：百分比分配

<div id="app">
  <div id="result">0</div>
  <div id="keypad">
    <div id="nums">
      <div class="key">7</div>
      <div class="key">8</div>
      <div class="key">9</div>
      <div class="key">4</div>
      <div class="key">5</div>
      <div class="key">6</div>
      <div class="key">1</div>
      <div class="key">2</div>
      <div class="key">3</div>
      <div class="key">0</div>
      <div class="key">.</div>
      <div class="key">=</div>
    </div>
    <div id="ops">
      <div class="key">×</div>
      <div class="key">-</div>
      <div class="keyy">+</div>
      <div class="key">÷</div>
      <div class="key">CM</div>
      <div class="key">M-</div>
      <div class="key">M+</div>
    </div>
  </div>
</div>

First name: <input ng-model="ctrl.firstName" required /><br />
Last name: <input ng-model="ctrl.lastName" required />

如何使用CSS网格正确拟合两个部分

2 个答案: