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

【问题标题】：How do I line up elements when using css-grid and flexbox?使用 css-grid 和 flexbox 时如何排列元素？
【发布时间】：2021-12-25 19:47:42
【问题描述】：

计算器底行的按钮（下图）与上面的按钮不对齐。

红色的 div 使用 css 网格，绿色的 div 使用 flexbox。我将所有这些 div 的边距设置为 5px，但绿色的边距与红色边距未对齐。我也尝试使用 flex 和 grid 的内置方法设置间隙，但结果几乎相同。

如何更改 css 以使底行中的按钮与它们上方的按钮对齐？

Current output

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

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

【问题讨论】：

  • 绿线和红线完美对齐。放大，您可以看到绿色和红色边框绘制在完全相同的像素上。我错过了什么吗？
  • 哦，您是说“/”按钮比该列中的其他按钮宽吗？
  • 绿框和红框的线对齐。由于色差，线条可能会出现错位（请参阅此处：en.wikipedia.org/wiki/Chromatic_aberration）。如果线条颜色相同，它们应该看起来完全对齐。
  • @Joshua Craven 我的措辞可能不正确，我的意思是 / 按钮比列中的其他按钮更宽。我只是添加了红色和绿色的边框，以便于提问，抱歉混淆了

标签： javascript html css flexbox css-grid


【解决方案1】：

我对此进行了一些思考，并重构了您的代码以使其不那么复杂。我们不必担心顶部、中间、底部等问题。我们只需将所有按钮及其 div 父级直接渲染到#main div 中。然后我们可以使用grid-template-area 来完全按照我们想要的方式渲染它们。

这是 CSS 的快速预览。有关完整实现，请参阅下面的完整 sn-p。我认为您会发现它是实现目标的一种更有效的方式。

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


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

【讨论】：

    【解决方案2】：

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

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

    【讨论】：

    • 谢谢！你知道是什么导致了错位吗？ （只是好奇）
    猜你喜欢
    • 2018-05-24
    • 2017-12-17
    • 1970-01-01
    • 2020-08-21
    • 2019-02-09
    • 2014-03-31
    • 1970-01-01
    • 2022-12-07
    • 2022-11-19
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode