我正在尝试创建一个简单的网站网格布局。问题是我无法在我的网格中找到一个部分来跨越。请协助

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

编码新手（css 和 html）。我正在尝试创建一个简单的网站布局，但无法在我的网格中获得一个部分来跨越。任何有经验的人都可以帮助我弄清楚我做错了什么。会上传代码。欢迎任何补充。

body {
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color: rgb(216, 216, 216);
}

img {
  max-block-size: 30px;
}

header {
  padding: 30px;
  background-color: rgb(2, 171, 177);
  margin-bottom: 35px;
  text-align: left;
  font-weight: 600;
}

.grid-main {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.grid-main div .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}

.grid-main div {
  background-color: rgb(65, 82, 82);
  border: 10px;
}

footer {
  padding: 50px;
  background-color: rgb(75, 66, 54);
  margin-top: 50px;
  margin-bottom: ;
}
<!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>Tri Diamon</title>
  <link rel="stylesheet" href="practicedocument.css" />
</head>

<body>
  <header>
    <img src="img/diamondlogo.png" alt="" /> Tri Diamond
  </header>
  <div class="grid-main">
    <div>
      <main class="prominant">
        Main
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro
          velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus
          animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat
          eaque laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium
          ipsam, et provident dicta temporibus animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita
          beatae maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos,
          quis ea. Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus animi quos eaque pariatur.
        </p>
      </main>
    </div>
    <div>
      <section>
        Section
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex quod nemo saepe nostrum nihil et numquam, voluptatem dignissimos temporibus ipsam. Laborum, pariatur aspernatur. Perspiciatis aliquam quod obcaecati numquam voluptatem molestiae delectus impedit
          laborum quas dicta!
        </p>
      </section>
    </div>
    <div>
      <article>
        Article
        <p class="art">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae sunt magni, ut similique dolores tempore repudiandae possimus distinctio quam praesentium ducimus hic cumque illo ea officiis? Assumenda, culpa, minima quaerat eveniet at porro atque
          id modi aperiam, dicta obcaecati quasi.
        </p>
      </article>
    </div>
    <div>
      <nav>
        Navigation
        <ul>
          <li>Virtual Tour</li>
          <li>Check Avaliability</li>
        </ul>
      </nav>
    </div>
  </div>
  <div>
    <footer>Footer</footer>
  </div>
</body>

</html>

标题为 Main 的网格框跨越 2 个部分以及如何控制它跨越的部分

html css css-grid
1个回答
0
投票

这是你想要的吗？

我是怎么发现这个bug的

问题源于将每个部分包含在一个 div 中。

要正确实现CSS网格，相关代码应放在

.grid-main div {}
.

这个选择器确保父级有

display: grid
，
如前所述，包装元素包含在块元素中。

但是，我找到了一个更简单的解决方案来解决您的问题。
通过删除包含第一个元素的 div 

class="prominant"
可以解决问题。

请注意，我选择了这种方法，因为灰色背景是不必要的，因为主体已经是棕色的。

长话短说：

所以 html 会是这样的：

<div class="grid-main">
  <main class="prominant">...</main> <!-- NOT wrapped by <div> -->
  
  <div>
    <section>...</section>
  </div>
  
  <div>
    <article>...</article>
  </div>
  
  <div>
    <nav>...</nav>
  </div>
  
  <div>
    <footer>...</footer>
  </div>
</div>

和这样的CSS：

/*
.grid-main div .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}
*/

.grid-main .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}

.grid-main div {
  background-color: rgb(65, 82, 82);
  border: 10px;
}

完整代码：

body {
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color: rgb(216, 216, 216);
}

img {
  max-block-size: 30px;
}

header {
  padding: 30px;
  background-color: rgb(2, 171, 177);
  margin-bottom: 35px;
  text-align: left;
  font-weight: 600;
}

.grid-main {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.grid-main .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}

.grid-main div {
  background-color: rgb(65, 82, 82);
  border: 10px;
}

footer {
  padding: 50px;
  background-color: rgb(75, 66, 54);
  margin-top: 50px;
  /* margin-bottom: ; */
}
<!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>Tri Diamon</title>
  <link rel="stylesheet" href="practicedocument.css" />
</head>

<body>
  <header><img src="img/diamondlogo.png" alt="" /> Tri Diamond</header>
  <div class="grid-main">
    <main class="prominant">
      Main
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro
        velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus
        animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat eaque
        laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium
        ipsam, et provident dicta temporibus animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae
        maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea.
        Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus animi quos eaque pariatur.
      </p>
    </main>
    <div>
      <section>
        Section
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex quod nemo saepe nostrum nihil et numquam, voluptatem dignissimos temporibus ipsam. Laborum, pariatur aspernatur. Perspiciatis aliquam quod obcaecati numquam voluptatem molestiae delectus impedit
          laborum quas dicta!
        </p>
      </section>
    </div>
    <div>
      <article>
        Article
        <p class="art">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae sunt magni, ut similique dolores tempore repudiandae possimus distinctio quam praesentium ducimus hic cumque illo ea officiis? Assumenda, culpa, minima quaerat eveniet at porro atque
          id modi aperiam, dicta obcaecati quasi.
        </p>
      </article>
    </div>
    <div>
      <nav>
        Navigation
        <ul>
          <li>Virtual Tour</li>
          <li>Check Avaliability</li>
        </ul>
      </nav>
    </div>
  </div>
  <div>
    <footer>Footer</footer>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.