个人中心
gpt4 book ai didi

html - CSS 网格布局的严重问题

转载 作者：行者123 更新时间：2023-11-28 19:31:12 25 4
gpt4 key购买 nike

我对编程非常陌生 - 我正在尝试使用 HTML 和 CSS 复制此网页布局 >>> Desired look <<< 到目前为止，我一直在使用 CSS 网格，我想我理解这个概念，但是我无法在我的网页上实现它:

  .wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1.1fr 1.8fr 0.1fr;
  grid-template-areas: "header header" "content content" "footer footer";
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #fff;
}

.wrapper>div {
  padding: 1em;
}

.mainheader {
  grid-area: header;
  width: 70%;
  background-color: #fff;
}

.content {
  grid-area: content;
  width: 40%;
  font-family: Trebuchet MS;
  background-color: #fff;
  color: #000;
}

.mainfooter {
  grid-area: footer;
  background-color: #854242;
  width: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 800px;
  height: 30px;
  li {
    display: inline;
  }
  #h1,
  h2 {
    color: #854242
  }
  #content {}
  #footer1 {
    background-color: #999999
  }
  #footer2 {
    background-color: #999999
  }
<body>

  <div class="wrapper">
    <div class="mainheader">
      <header>

        <h1>Webbutveckling för mobila enheter</h1>
        <h2>Responsiv webbdesign</h2>

        <img src="images/header.jpg" alt="Header-bild" width="960px" />

        <nav id="mainmenu">
          <ul>
            <li><a href="index.htm" title="Startsidan">Startsidan</a></li>
            <li><a href="#" title="Sida två">Sida 2</a></li>
            <li><a href="#" title="Sida tre">Sida 3</a></li>
            <li><a href="#" title="Sida fyra">Sida 4</a></li>
            <li><a href="http://www.miun.se" title="Mittuniversitetet">Miun</a></li>
          </ul>
        </nav>

        <div id="search">
          <form>
            <input type="text" name="searchstring" id="searchstring">
            <input type="submit" value="Sök" id="searchbutton">
          </form>
        </div>
        <!-- Slut på search -->

      </header>
    </div>

    <div class="content">
      <section>
        <h2>Box 1</h2>
        <p>
          Mauris dapibus consectetur neque commodo eleifend. Pellentesque interdum posuere mollis. Nunc dui libero, feugiat sed consectetur ac, eleifend fermentum nisl. Praesent felis ligula, interdum sit amet tortor in, eleifend vestibulum mi. Duis eu ultricies
          enim. Quisque blandit ligula vel odio adipiscing, et consectetur odio vestibulum. Nam sed lectus vulputate, posuere orci sit amet, eleifend massa. Nullam mi ante, faucibus vitae turpis sed, volutpat auctor orci.
        </p>
        <p>
          Aenean varius, sapien sed pharetra gravida, massa massa sodales mi, eu venenatis quam nunc sit amet ante. Praesent bibendum massa enim, vitae pulvinar odio imperdiet sed. Nam ac lacus ac nulla mollis blandit eu quis lectus. Nullam non tortor vel ipsum
          consectetur lacinia eget non nisi. Aliquam erat volutpat. Pellentesque eget dui bibendum, malesuada quam quis, consequat lacus. Ut tincidunt pharetra laoreet. Nullam sed sem et mauris luctus ullamcorper. Mauris ipsum velit, tincidunt eget quam
          convallis, cursus suscipit ante. Vivamus vitae massa id lorem interdum hendrerit. Duis suscipit elit eu tempor tincidunt. Suspendisse ut metus id magna aliquam posuere. Duis vulputate sit amet ipsum vel egestas. Ut rhoncus elementum augue.
        </p>
        <footer id="footer1">
          <p>
            Denna sektion är från start till vänster, sedan ovanpå.
          </p>
        </footer>
      </section>

      <section>
        <h2>Box 2</h2>
        <p>
          Vestibulum mollis mattis risus, feugiat iaculis massa suscipit vel. Aenean ultricies lorem nec dui pulvinar, quis scelerisque enim egestas. Morbi massa eros, tempus id dictum eget, facilisis lobortis arcu. Nulla ut blandit nunc, ut egestas massa. Duis
          a lorem et lorem commodo dictum nec a libero. Donec porta lectus a accumsan rhoncus. Nunc vitae est id tellus suscipit malesuada. Aenean eu arcu et quam laoreet auctor ac ut sapien. Fusce sed ligula quis felis vehicula tempor sed ut libero.
          Vestibulum hendrerit id libero eget dictum. Nulla augue erat, fringilla eget imperdiet non, sagittis vitae arcu.
        </p>

        <footer id="footer2">
          <p>
            Denna sektion är från start till höger, sedan under.
          </p>

        </footer>

      </section>
    </div>


    <div class="mainfooter">
      <footer>
        <p>Sidfot - Webbutveckling för mobila enheter</p>
      </footer>
    </div>

  </div>

</body>

我做错了什么？我应该以其他方式解决这个问题，也许是 Bootstrap ？ <-- 请注意这是一个非常粗略的草稿 -->

最佳答案

例如这个，我将 .wrapper display 设置为 block ，我使用 2 个内联 block 来做框并添加边距，你只需要调整之前使用网格属性的其他部分

.wrapper {
  display: block;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1.1fr 1.8fr 0.1fr;
  grid-template-areas: "header header" "content content" "footer footer";
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #fff;
}

.wrapper>div {
  padding: 1em;
}

.mainheader {
  grid-area: header;
  width: 70%;
  background-color: #fff;
}

.content {
  /*grid-area: content;*/
  width: 100%;
  font-family: Trebuchet MS;
  background-color: #fff;
  color: #000;
}
.content section {
width: calc(50% - 10px);/*for margin*/
display: inline-block;
vertical-align: top;
margin: 0px 3px;
}

.mainfooter {
  grid-area: footer;
  background-color: #854242;
  width: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 800px;
  height: 30px;
  li {
    display: inline;
  }
  #h1,
  h2 {
    color: #854242
  }
  #content {}
  #footer1 {
    background-color: #999999
  }
  #footer2 {
    background-color: #999999
  }
<body>

   <div class="wrapper">
    <div class="mainheader">
      <header>

        <h1>Webbutveckling för mobila enheter</h1>
        <h2>Responsiv webbdesign</h2>

        <img src="images/header.jpg" alt="Header-bild" width="960px" />

        <nav id="mainmenu">
          <ul>
            <li><a href="index.htm" title="Startsidan">Startsidan</a></li>
            <li><a href="#" title="Sida två">Sida 2</a></li>
            <li><a href="#" title="Sida tre">Sida 3</a></li>
            <li><a href="#" title="Sida fyra">Sida 4</a></li>
            <li><a href="http://www.miun.se" title="Mittuniversitetet">Miun</a></li>
          </ul>
        </nav>

        <div id="search">
          <form>
            <input type="text" name="searchstring" id="searchstring">
            <input type="submit" value="Sök" id="searchbutton">
          </form>
        </div>
        <!-- Slut på search -->

      </header>
    </div>

    <div class="content">
      <section>
        <h2>Box 1</h2>
        <p>
          Mauris dapibus consectetur neque commodo eleifend. Pellentesque interdum posuere mollis. Nunc dui libero, feugiat sed consectetur ac, eleifend fermentum nisl. Praesent felis ligula, interdum sit amet tortor in, eleifend vestibulum mi. Duis eu ultricies
          enim. Quisque blandit ligula vel odio adipiscing, et consectetur odio vestibulum. Nam sed lectus vulputate, posuere orci sit amet, eleifend massa. Nullam mi ante, faucibus vitae turpis sed, volutpat auctor orci.
        </p>
        <p>
          Aenean varius, sapien sed pharetra gravida, massa massa sodales mi, eu venenatis quam nunc sit amet ante. Praesent bibendum massa enim, vitae pulvinar odio imperdiet sed. Nam ac lacus ac nulla mollis blandit eu quis lectus. Nullam non tortor vel ipsum
          consectetur lacinia eget non nisi. Aliquam erat volutpat. Pellentesque eget dui bibendum, malesuada quam quis, consequat lacus. Ut tincidunt pharetra laoreet. Nullam sed sem et mauris luctus ullamcorper. Mauris ipsum velit, tincidunt eget quam
          convallis, cursus suscipit ante. Vivamus vitae massa id lorem interdum hendrerit. Duis suscipit elit eu tempor tincidunt. Suspendisse ut metus id magna aliquam posuere. Duis vulputate sit amet ipsum vel egestas. Ut rhoncus elementum augue.
        </p>
        <footer id="footer1">
          <p>
            Denna sektion är från start till vänster, sedan ovanpå.
          </p>
        </footer>
      </section>

      <section>
        <h2>Box 2</h2>
        <p>
          Vestibulum mollis mattis risus, feugiat iaculis massa suscipit vel. Aenean ultricies lorem nec dui pulvinar, quis scelerisque enim egestas. Morbi massa eros, tempus id dictum eget, facilisis lobortis arcu. Nulla ut blandit nunc, ut egestas massa. Duis
          a lorem et lorem commodo dictum nec a libero. Donec porta lectus a accumsan rhoncus. Nunc vitae est id tellus suscipit malesuada. Aenean eu arcu et quam laoreet auctor ac ut sapien. Fusce sed ligula quis felis vehicula tempor sed ut libero.
          Vestibulum hendrerit id libero eget dictum. Nulla augue erat, fringilla eget imperdiet non, sagittis vitae arcu.
        </p>

        <footer id="footer2">
          <p>
            Denna sektion är från start till höger, sedan under.
          </p>

        </footer>

      </section>
    </div>


    <div class="mainfooter">
      <footer>
        <p>Sidfot - Webbutveckling för mobila enheter</p>
      </footer>
    </div>

  </div>
</body>

关于html - CSS 网格布局的严重问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55008014/

25 4 0
文章推荐： python - 将字符串拆分为元组列表
文章推荐： ios - 无法在 Firebase 函数中读取 null 的属性
文章推荐： 赋值中的Python逻辑
文章推荐： ios - 不包含 GvrViewerMain 的 Google Cardboard SDK
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com