css 我的网格中的div没有正确排列

axkjgtzd 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(94)

这个项目是用网格重建一幅蒙德里安的画。我不会正确排队，有人能告诉我我做错了什么吗？如果可能的话，你能解释一下为什么它们是4列和4行，而不是2和3。还有定位，当我看图片的时候，我看到顺序是R，W，W，W，Bl，W，Y，Bk，W，但是老师说是R，W，W，W，B，W，W，Bk
这是我的代码

<!DOCTYPE html>
<html>
<head>
  <style>
  .grid-container{
      height: 748px;
      width: 748px;
      display: grid;
      background-color: black;
      grid-template-columns: 320px, 198px, 153px,50px;
      grid-template-rows: 414px, 130px, 155px, 20px;
      gap: 9px;
    }

    .child{
      background-color: #F0F1EC;
    }

    .red{
      background-color: #E72F24;
    }

    .white1{
      grid-column: span 3;
    } 

    .white2{
      grid-row: span 2;
    }

   .white3{
     grid-area: 2 / 2 / 4 / 4
    }

    .white4{
      grid-row: span 2;
    }

    .blue{
      background-color: #004592;
      border-bottom: 10px solid #000;
    }

    .yellow{
      background-color: #F9D01E;

    }

    .black{
      background-color: #232629;

    }
  </style>
</head>

<body>

  <div class="grid-container">
    <div class="red child"></div>
    <div class="white1 child"></div>
    <div class="white2 child"></div>
    <div class="white3 child"></div>

    <div class="blue child"></div>
    <div class="white4 child"></div>

    <div class="child"></div>
    <div class="yellow child"></div>
    <div class="black child"></div>
  </div>
</body>

字符串

这就是解决方案 *

<!DOCTYPE html>
    <html>
    <head>
      <style>
        .container {
          height: 748px;
          width: 748px;
          display: grid;
          background-color: #000;
          grid-template-columns: 320px 198px 153px 50px;
          grid-template-rows: 414px 130px 155px 22px;
          gap: 9px;
        }

        .item {
          background-color: #F0F1EC;
        }

        .red {
          background-color: #E72F24;
        }

        .white1 {
          grid-column: span 3;
        }

        .white2 {
          grid-row: span 2;
        }

        .white3 {
          grid-area: 2 / 2 / 4 /4
        }

        .blue {
          background-color: #004592;
          border-bottom: 10px solid #000;
        }

        .white4 {
          grid-row: span 2;
        }

        .yellow {
          background-color: #F9D01E;
        }

        .black {
          background-color: #232629;
        }
      </style>
    </head>

    <body>

     <div class="container">
        <div class="item red"></div>
        <div class="item white1"></div>
        <div class="item white2"></div>
        <div class="item white3"></div>

        <div class="item blue"></div>
        <div class="item white4"></div>

        <div class="item"></div>
        <div class="item yellow"></div>
        <div class="item black"></div>
      </div>
    </body>
  </html>

型

css

来源：https://stackoverflow.com/questions/76839367/the-div-in-my-grid-is-not-lining-up-correctly

1条答案

按热度按时间

js81xvg61#

首先，列和行分别由grid-template-columns和grid-template-rows确定。有4个数字，这就是为什么有4行/列，值是高度/宽度。
至于为什么它们看起来不同，这是因为grid-template-columns和grid-template-rows的值中有逗号，它们应该只是空格。

<!DOCTYPE html>
<html>
<head>
  <style>
  .grid-container{
      height: 748px;
      width: 748px;
      display: grid;
      background-color: black;
      grid-template-columns: 320px 198px 153px 50px;
      grid-template-rows: 414px 130px 155px 20px;
      gap: 9px;
    }

    .child{
      background-color: #F0F1EC;
    }

    .red{
      background-color: #E72F24;
    }

    .white1{
      grid-column: span 3;
    } 

    .white2{
      grid-row: span 2;
    }

   .white3{
     grid-area: 2 / 2 / 4 / 4
    }

    .white4{
      grid-row: span 2;
    }

    .blue{
      background-color: #004592;
      border-bottom: 10px solid #000;
    }

    .yellow{
      background-color: #F9D01E;

    }

    .black{
      background-color: #232629;

    }
  </style>
</head>

<body>

  <div class="grid-container">
    <div class="red child"></div>
    <div class="white1 child"></div>
    <div class="white2 child"></div>
    <div class="white3 child"></div>

    <div class="blue child"></div>
    <div class="white4 child"></div>

    <div class="child"></div>
    <div class="yellow child"></div>
    <div class="black child"></div>
  </div>
</body>

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

css 我的网格中的div没有正确排列

1条答案

相关问题

热门标签

最新问答