文章/答案/技术大牛

发布

社区首页 >问答首页 >如何防止CSS网格井喷？

问如何防止CSS网格井喷？
EN

Stack Overflow用户

提问于 2020-06-17 19:53:05

回答 1查看 563关注 0票数 1

我有一个问题-我的CSS布局被填充了内容弄得一团糟。

如果我从超文本标记语言中去掉'p‘标签(内部:带有class=“理念”的部分)，我的CSS布局就能正常工作，屏幕两侧的边距就会按预期的那样出现。当“p”标签再次插入时，我的边距变小或从屏幕上消失。我如何才能防止这种情况发生？

我如何解决这个问题？

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}


/* wrapper of the content */

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 11.6666667% repeat(12, minmax(0, 4, 47916667%))/*repeat(12, minmax(0, 86px))*/
  11.6666667%;
  column-gap: 2, 08333333%;
  /*40px*/
  grid-template-areas: "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation" ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ." ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ." ". categories categories categories categories categories categories categories categories categories categories categories categories ." ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ." ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ." "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser" "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright";
  grid-template-rows: 1235px 858px 1307px 230px 906px 608px 528px 1fr;
}

.navigation {
  background-color: turquoise;
  grid-area: navigation;
}

.philosophy {
  background-color: rgba(230, 45, 45, 0.50);
  grid-area: philosophy;
}

.philosophy_content {
  min-width: 0;
  overflow: auto;
  /*any other value than visible*/
}

.newestWork {
  background-color: rgba(50, 115, 180, 0.50);
  grid-area: newestWork;
}

.categories {
  background-color: rgba(120, 230, 45, 0.50);
  grid-area: categories;
}

.testimonials {
  background-color: turquoise;
  grid-area: testimonials;
}

.followOnInsta {
  background-color: rgba(230, 45, 45, 0.50);
  grid-area: followOnInsta;
}

.footerBrowser {
  background-color: rgba(50, 115, 180, 0.50);
  grid-area: footerBrowser;
}

.copyright {
  background-color: rgba(120, 230, 45, 0.50);
  grid-area: copyright;
}

@media screen and (max-width: 768px) {
  /*.navigation {
                background-color: pink;
            }*/
  .wrapper {
    grid-template-areas: "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation" ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ." ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ." ". categories categories categories categories categories categories categories categories categories categories categories categories ." ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ." ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ." "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser" "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
  }
}

@media screen and (max-width: 360px) {
  /*480px*/
  /*.navigation {
                background-color: yellow;
            }*/
  .wrapper {
    grid-template-areas: "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation" "philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy" "newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork" "categories categories categories categories categories categories categories categories categories categories categories categories categories categories" "testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials" "followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta" "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser" "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
  }
}

<div class="BG_gradient">
  <div class="wrapper">
    <section class="navigation">
      navigation
    </section>
    <section class="philosophy">
      <div class="philosophy_content">
        <img alt="philosophy img" />
        <h1>Látásmódom</h1>
        <h2>Őszinte képvilág</h2>

        <!--If I remove this <p> tag my css layout works. When the <p> tag is inserted my side margins get smaller or diappear from screen. How can I fix this problem?-->
        <!p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

        <h2>Tudj meg többet</h2>
      </div>
    </section>
    <section class="newestWork">
      newestWork
    </section>
    <section class="categories">
      categories
    </section>
    <section class="testimonials">
      testimonials
    </section>
    <section class="followOnInsta">
      followOnInsta
    </section>
    <section class="footerBrowser">
      footerBrowser
    </section>
    <section class="copyright">
      copyright
    </section>
  </div>
</div>

css

overflow

css-grid

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-17 20:47:51

在带浮点的数字中使用.而不是,。像这样

grid-template-columns: 
            11.6666667%
            repeat(12, minmax(0, 4.47916667%)) 
            11.6666667%
        ;
        column-gap: 2.08333333%;

body {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
    }

    /* wrapper of the content */
    .wrapper {
        height: 100vh;
        display: grid;
        grid-template-columns: 
            11.6666667%
            repeat(12, minmax(0, 4.47916667%)) 
            11.6666667%
        ;
        column-gap: 2.08333333%; 

        grid-template-areas:
          "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
          ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ."
          ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ."
          ". categories categories categories categories categories categories categories categories categories categories categories categories ."
          ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ."
          ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ."
          "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
          "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
        ;

        grid-template-rows:
            1235px
            858px
            1307px
            230px
            906px
            608px
            528px
            1fr
        ; 
    }

    .navigation {
        background-color: turquoise;
        grid-area: navigation;
    }

    .philosophy {
        background-color: rgba(230,45,45,0.50);
        grid-area: philosophy;
    }

    .philosophy_content {
        min-width: 0;
        overflow: auto; /*any other value than visible*/
    }

    .newestWork {
        background-color: rgba(50,115,180,0.50);
        grid-area: newestWork;
    }

    .categories {
        background-color: rgba(120,230,45,0.50);
        grid-area: categories;
    }

    .testimonials {
        background-color: turquoise;
        grid-area: testimonials;
    }

    .followOnInsta {
        background-color: rgba(230,45,45,0.50);
        grid-area: followOnInsta;
    }

    .footerBrowser {
        background-color: rgba(50,115,180,0.50);
        grid-area: footerBrowser;
    }

    .copyright {
        background-color: rgba(120,230,45,0.50);
        grid-area: copyright;
    }

    @media screen and (max-width: 768px) {
        /*.navigation {
            background-color: pink;
        }*/

        .wrapper {
            grid-template-areas: 
            "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
            ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ."
            ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ."
            ". categories categories categories categories categories categories categories categories categories categories categories categories ."
            ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ."
            ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ."
            "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
            "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
        }
    }

    @media screen and (max-width: 360px) { /*480px*/
        /*.navigation {
            background-color: yellow;
        }*/

        .wrapper {
            grid-template-areas: 
                "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
                "philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy"
                "newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork"
                "categories categories categories categories categories categories categories categories categories categories categories categories categories categories"
                "testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials"
                "followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta"
                "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
                "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
        }
    }

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

<head>
  <meta charset="UTF-8">
  <title>Photography</title>

  <meta name="keywords" content="portfolio, homepage" />
  <meta name="description" content="portfolio" />
  <meta name="author" content="Burjan Erno" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport">


  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet">
</head>

<body>
  <div class="BG_gradient">
    <div class="wrapper">
      <section class="navigation">
        navigation
      </section>
      <section class="philosophy">
        <div class="philosophy_content">
          <img alt="philosophy img" />
          <h1>Látásmódom</h1>
          <h2>Őszinte képvilág</h2>

          <!--If I remove this <p> tag my css layout works. When the <p> tag is inserted my side margins get smaller or diappear from screen. How can I fix this problem?-->
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>

          <h2>Tudj meg többet</h2>
        </div>
      </section>
      <section class="newestWork">
        newestWork
      </section>
      <section class="categories">
        categories
      </section>
      <section class="testimonials">
        testimonials
      </section>
      <section class="followOnInsta">
        followOnInsta
      </section>
      <section class="footerBrowser">
        footerBrowser
      </section>
      <section class="copyright">
        copyright
      </section>
    </div>
  </div>
</body>

</html>

票数 0

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

原文链接：

https://stackoverflow.com/questions/62428373

复制

相似问题

问如何防止CSS网格井喷？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止CSS网格井喷？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止CSS网格井喷？
EN