时间戳

首页 > 解决方案 > 如何使用 css 网格正确拟合两个部分

html - 如何使用 css 网格正确拟合两个部分

问题描述

我正在尝试使用 CSS 网格系统构建一个计算器界面，但是正如您所见，虽然我为 nums 部分分配了 54% 的键盘宽度和 46% 的键盘宽度，但带有nums和ops id 的两个键盘部分不适合键盘部分操作部分的部分和键盘部分的两列，但它们仍然不适合键盘部分。

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;
}
<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>

标签： htmlcss

解决方案

你有它：

您只需将其用于网格设置，以便确定列的开始位置：

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

并删除 nums 和 ops 的宽度：

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>

有了这个，你最终会得到这个模型：

带有固定列的计算器

希望它对你有用！

推荐阅读