我可以获得有关网格布局的帮助吗？

Question

我现在正在学习CSS，我正在努力让它按照我想要的方式工作，但我不明白为什么，这是代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        header {
            display: grid;
            grid-template-columns: 1fr 11fr 1fr 1fr;
            grid-template-areas: "logo . btnusr btnlogoff";
        }

        .logo {
            grid-area: "logo";
            height: 35px;
            padding: 5px;
        }

        .btnusr {
            grid-area: "btnusr";
            height: 35px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <header>
        <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo">
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr">
    </header>
</body>

</html>

我正在尝试做到这一点，以便我在左上角获得徽标，11fr 的空白单元格，以及右侧的其他 2 个按钮。我将网格区域定义到特定位置，但是无论我如何更改，对象都不会移动到所需位置。即使我将网格区域从徽标交换为 btnusr，徽标始终位于第一个，并且按钮始终放置在第二个单元格中，这是浏览器中网格视图的打印：

Answer 1

要使其按照您希望的方式运行，您需要具有与模板列中定义的相同数量的元素，如下所示：

<header>
      <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo" />
      <label style="visibility: hidden">DUMMY</label>
      <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" />
      <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" />
    </header>

但我宁愿使用显示柔性和之间的空间：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

      header {
        display: flex;
        justify-content: space-between;
      }

      .logo {
        grid-area: "logo";
        height: 35px;
        padding: 5px;
      }

      .btnusr {
        grid-area: "btnusr";
        height: 35px;
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <header>
      <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo" />
      <div class="buttons">
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" />
        <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" />
      </div>
    </header>
  </body>
</html>

我可以获得有关网格布局的帮助吗？

问题描述投票：0回答：1

1个回答

最新问题

我可以获得有关网格布局的帮助吗？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1