代码之家 › 专栏 › 技术社区 › M.H Mighani

如何用css网格正确匹配两个部分

css html

M.H Mighani · 技术社区 · 7 年前

我试图建立一个计算器界面与CSS网格系统,但正如你看到的两个键盘部分与 努姆斯 和 ids不适合键盘部分,尽管我为nums部分分配了54%的键盘宽度,为ops部分分配了46%的键盘宽度,为键盘部分分配了两列,但它们仍然不适合键盘部分。

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>

2 回复 | 直到 7 年前

Kashmir54 7 年前

就这样:

您只需将其用于网格设置,就可以确定列的起始位置:

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>

有了它,您将得到以下模型:

希望对你有用!

vals 7 年前

您已经将它们指定为小键盘的子级,不需要宽度:百分比指定

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: 
    '. . .'
    '. . .'
    '. . .'
    '. . .';
    /* no dimensions */
}

#ops{
    display: grid;
    grid-template-areas: 
    'Ã .'
    '- .'
    'plus .'
    'plus .';
    /* no dimensions */
}

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>