文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在使用css-grid和flexbox时排列元素？

问如何在使用css-grid和flexbox时排列元素？
EN

Stack Overflow用户
提问于 2021-11-14 04:19:13
回答 2查看 41关注 0票数 1

计算器底部一行的按钮(下图)与上面的按钮不对齐。

红色的div使用css网格，绿色的div使用flexbox。我将所有这些div的边距都设置为5px，但是绿色的和红色的边距不对齐。我也尝试过使用flex和grid的内置方法来设置间距，但结果几乎是一样的。

如何更改css以使底部一行中的按钮与其上方的按钮对齐？

Current output

​

代码语言：javascript
复制
const add = function(a, b) {
    return a+b;
}

const subtract = function(a, b) {
    return a-b;
}

const multiply = function(a, b) {
    return a*b;
}

const divide= function(a, b) {
    return a/b;
}

const operate = function(operator, a, b) {
    if (operator === add || operator === subtract || operator === multiply || operator === divide) {
        return operator(a, b);
    }
   else {
        return;
    }
}


let maindiv = document.createElement("div");
maindiv.id = "main";
document.body.append(maindiv);

let textboxdiv = document.createElement("div");
textboxdiv.id = "textbox";
// maindiv.append(textdiv);

let topdiv = document.createElement("div");
topdiv.id = "topdiv";
maindiv.append(topdiv);

let middlediv = document.createElement("div");
middlediv.id = "middlediv";
maindiv.append(middlediv);

let bottomdiv = document.createElement("div");
bottomdiv.id = "bottomdiv";
maindiv.append(bottomdiv);


let buttons = [];
let divs_top= [];
let divs_middle = [];
let divs_bottom = [];


let top_labels = ["Clear", "Enter"];
let middle_labels = ["1", "2", "3", "+", "4", "5", "6", "-", "7", "8", "9", "*"];
let bottom_labels = ["0", "/"];

function makeButtonsFromList (list, div, divs, buttons) {
    for (let i = 0; i < list.length; i++) {
        buttons[i] = document.createElement("button");
        buttons[i].id = "x"+list[i];
        buttons[i].textContent = list[i];
        divs[i] = document.createElement("div");
        divs[i].id = "x"+list[i];
        divs[i].appendChild(buttons[i]);
        div.appendChild(divs[i]);
    }
}

makeButtonsFromList(top_labels, topdiv, divs_top, buttons);
makeButtonsFromList(middle_labels, middlediv, divs_middle, buttons);
makeButtonsFromList(bottom_labels, bottomdiv, divs_bottom, buttons);

divs_bottom[1].id = "x";
代码语言：javascript
复制
body {
    background-color: black;
    
}


button {
    color: black;

    width: 100%;
    height: 100%;
    
    /*
    width: 75px;
    height: 75px;
    */

}


#main {
    display: flex;
    flex-direction: column;
    margin: 0 auto;

    width: 760px;
    height: 470px;

}

#topdiv>div, #middlediv>div, #bottomdiv>div {
    margin: 5px;
    height: 50px;
}

#topdiv{
    display: flex;
    /* border: solid 1px yellow; */
    
}
#topdiv > div {
    flex: 1;
}

#middlediv{
    border: solid 1px red;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-grow: 2;
    justify-content:space-evenly;
    */
}

#middlediv > div {
    height: 50px;


}

#bottomdiv{
    border: solid 1px green;
    display: flex;
   
}

#x0 {
    flex: 3;
}

#x {
    flex: 1;

}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>See you Calcu-later</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="js.js"></script>
    
</body>
</html>

​

javascript
html
css
flexbox
css-grid
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-14 06:37:07

我想了一下，我重构了你的代码，使它变得更简单。我们不必担心顶部、中间、底部等，我们只需将所有的按钮和它们的div父元素直接渲染到#main目录中即可。然后，我们可以使用grid-template-area来精确地呈现我们想要的效果。

下面是CSS的快速预览。有关完整的实现，请参阅下面的完整代码片段。我想你会发现它是实现你目标的一种更有效的方法。

代码语言：javascript
复制
#main {
        display: grid;
        width: 760px;
        height: 470px;
        row-gap: 10px;
        column-gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "xClear xClear xEnter xEnter"
            "none none none none"
            "none none none none"
            "none none none none"
            "x0 x0 x0 slash";  
      }
      
    .xClear{
        grid-area: xClear;
    }
    
    .xEnter{
        grid-area: xEnter;
    }
    
    .x0{
        grid-area: x0;
     }

     .x/{
        grid-area: slash;
     }

​

代码语言：javascript
复制
const add = function(a, b) {
    return a+b;
}

const subtract = function(a, b) {
    return a-b;
}

const multiply = function(a, b) {
    return a*b;
}

const divide= function(a, b) {
    return a/b;
}

const operate = function(operator, a, b) {
    if (operator === add || operator === subtract || operator === multiply || operator === divide) {
        return operator(a, b);
    }
   else {
        return;
    }
}


let maindiv = document.createElement("div");
maindiv.id = "main";
document.body.append(maindiv);

let textboxdiv = document.createElement("div");
textboxdiv.id = "textbox";

let buttons = [];
let divs =[];
let labels = ["Clear", "Enter", "1", "2", "3", "+", "4", "5", "6", "-", "7", "8", "9", "*", "0", "/"];

function makeButtonsFromList (list, divs, buttons) {
    for (let i = 0; i < list.length; i++) {
        buttons[i] = document.createElement("button");
        buttons[i].id = "x"+list[i];
        buttons[i].textContent = list[i];
        divs[i] = document.createElement("div");
        divs[i].classList.add("x"+list[i]);
        divs[i].appendChild(buttons[i]);
        maindiv.appendChild(divs[i]);
    }
}

makeButtonsFromList(labels, divs, buttons);
代码语言：javascript
复制
body {
    background-color: black;
}

button {
    color: black;
    width: 100%;
    height: 100%;   
}

#main {
        display: grid;
        width: 760px;
        height: 470px;
        row-gap: 10px;
        column-gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "xClear xClear xEnter xEnter"
            "none none none none"
            "none none none none"
            "none none none none"
            "x0 x0 x0 slash";  
      }
      
    .xClear{
        grid-area: xClear;
    }
    
    .xEnter{
        grid-area: xEnter;
    }
    
    .x0{
        grid-area: x0;
        }
     .x/{
        grid-area: slash;
        }
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>See you Calcu-later</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="js.js"></script>
    
</body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2021-11-14 04:46:34

您可以设置#x0 { flex-basis: 558px; }来达到您想要的效果。

代码语言：javascript
复制
const add = function(a, b) {
    return a+b;
}

const subtract = function(a, b) {
    return a-b;
}

const multiply = function(a, b) {
    return a*b;
}

const divide= function(a, b) {
    return a/b;
}

const operate = function(operator, a, b) {
    if (operator === add || operator === subtract || operator === multiply || operator === divide) {
        return operator(a, b);
    }
   else {
        return;
    }
}


let maindiv = document.createElement("div");
maindiv.id = "main";
document.body.append(maindiv);

let textboxdiv = document.createElement("div");
textboxdiv.id = "textbox";
// maindiv.append(textdiv);

let topdiv = document.createElement("div");
topdiv.id = "topdiv";
maindiv.append(topdiv);

let middlediv = document.createElement("div");
middlediv.id = "middlediv";
maindiv.append(middlediv);

let bottomdiv = document.createElement("div");
bottomdiv.id = "bottomdiv";
maindiv.append(bottomdiv);


let buttons = [];
let divs_top= [];
let divs_middle = [];
let divs_bottom = [];


let top_labels = ["Clear", "Enter"];
let middle_labels = ["1", "2", "3", "+", "4", "5", "6", "-", "7", "8", "9", "*"];
let bottom_labels = ["0", "/"];

function makeButtonsFromList (list, div, divs, buttons) {
    for (let i = 0; i < list.length; i++) {
        buttons[i] = document.createElement("button");
        buttons[i].id = "x"+list[i];
        buttons[i].textContent = list[i];
        divs[i] = document.createElement("div");
        divs[i].id = "x"+list[i];
        divs[i].appendChild(buttons[i]);
        div.appendChild(divs[i]);
    }
}

makeButtonsFromList(top_labels, topdiv, divs_top, buttons);
makeButtonsFromList(middle_labels, middlediv, divs_middle, buttons);
makeButtonsFromList(bottom_labels, bottomdiv, divs_bottom, buttons);

divs_bottom[1].id = "x";
代码语言：javascript
复制
body {
    background-color: black;
    
}


button {
    color: black;

    width: 100%;
    height: 100%;
    
    /*
    width: 75px;
    height: 75px;
    */

}


#main {
    display: flex;
    flex-direction: column;
    margin: 0 auto;

    width: 760px;
    height: 470px;

}

#topdiv>div, #middlediv>div, #bottomdiv>div {
    margin: 5px;
    height: 50px;
}

#topdiv{
    display: flex;
    /* border: solid 1px yellow; */
    
}
#topdiv > div {
    flex: 1;
}

#middlediv{
    border: solid 1px red;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-grow: 2;
    justify-content:space-evenly;
    */
}

#middlediv > div {
    height: 50px;


}

#bottomdiv{
    border: solid 1px green;
    display: flex;
   
}

#x0 {
    flex-basis: 558px;
}

#x {
      flex: 1
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>See you Calcu-later</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="js.js"></script>
    
</body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69960246

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档