html - CSS 图像将网格项向下推

Question

所以我一直在尝试将图像放入网格中，但它给我带来了问题。
现在，我最大的问题是将另一个网格项向下推。

body {
  padding: 0;
  margin: 0;
}

.main {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-bar {
  grid-row: 1/16;
  grid-column: 4/21;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-info {
  grid-column: 1/21;
  grid-row: 1/21;
  background: #333;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.header-title {
  grid-column: 3;
  grid-row: 2/8;
  background: #000;
}

.business {
  grid-column: 17;
}

.side-bar {
  background: #fff;
  grid-row: 1/21;
  grid-column: 1/4;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  border-right: 1px solid #0F6B99;
}

.side-bar img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -24px;
}

.home-button {
  padding: 20px;
  text-align: center;
  background: #0F6B99;
  grid-row: 3/4;
}

.buy-button {
  padding: 20px;
  text-align: center;
  background: #59B3B3;
  grid-row: 4/5;
}

.sell-button {
  padding: 20px;
  text-align: center;
  background: #8FCCB8;
  grid-row: 5/6;
}

.rent-button {
  padding: 20px;
  text-align: center;
  background: #B8E6B8;
  grid-row: 6/7;
}

.article1 {
  background: #e6174b;
  grid-row: 16/21;
  grid-column: 4/11;
}

.article2 {
  background: #8FCCB8;
  grid-row: 16/21;
  grid-column: 11/18;
}

.article3 {
  background: #B8E6B8;
  grid-row: 16/21;
  grid-column: 18/21;
}

<div class="main">
  <div class="main-bar">
    <div class="main-info">
      <img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
      <div class="header-title">High Quality Realstate Asistance</div>
    </div>
  </div>
  <div class="side-bar">
    <!--<img src="img/logo.png" alt="">-->
    <div class="home-button">
      Home
    </div>
    <div class="buy-button">
      Buy
    </div>
    <div class="sell-button">
      Sell
    </div>
    <div class="rent-button">
      Rent
    </div>
  </div>
  <div class="article1">
  </div>
  <div class="article2">
  </div>
  <div class="article3">
  </div>
</div>

有问题的图片有一个 business 类，下推的元素有一个 header-title 类。 header-title 应该在 main-info 中，但是当“business”出现时，它会将 header-title 下推! !

Answer 1

这里的问题是您的 business 类图像溢出了它自己的网格及其容器的网格。

为了解决这个问题，将属性 overflow: hidden 添加到 .main-info 类和 .business 类中。

这些类还需要“display: grid”属性，以便浏览器可以相应地处理这两个类的 grid-column 和 grid-row 属性。

完成这些添加后，您可以相应地调整 .business 类和 .header-title 类的网格行和网格列，以找到您想要的位置。

下面是完整的 CSS 和 HTML:

body {
  padding: 0;
  margin: 0;
}

.main {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-bar {
  grid-row: 1/16;
  grid-column: 4/21;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-info {
  grid-column: 1/21;
  grid-row: 1/21;
  background: #333;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
  overflow: hidden;
}

.header-title {
  grid-column: 3;
  grid-row: 2/8;
  background: #000;
  display: grid;
}

.business {
  grid-column: 17;
  overflow: hidden;
  display: grid;
}

.side-bar {
  background: #fff;
  grid-row: 1/21;
  grid-column: 1/4;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  border-right: 1px solid #0F6B99;
}

.side-bar img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -24px;
}

.home-button {
  padding: 20px;
  text-align: center;
  background: #0F6B99;
  grid-row: 3/4;
}

.buy-button {
  padding: 20px;
  text-align: center;
  background: #59B3B3;
  grid-row: 4/5;
}

.sell-button {
  padding: 20px;
  text-align: center;
  background: #8FCCB8;
  grid-row: 5/6;
}

.rent-button {
  padding: 20px;
  text-align: center;
  background: #B8E6B8;
  grid-row: 6/7;
}

.article1 {
  background: #e6174b;
  grid-row: 16/21;
  grid-column: 4/11;
}

.article2 {
  background: #8FCCB8;
  grid-row: 16/21;
  grid-column: 11/18;
}

.article3 {
  background: #B8E6B8;
  grid-row: 16/21;
  grid-column: 18/21;
}

<div class="main">
  <div class="main-bar">
    <div class="main-info">
      <img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
      <div class="header-title">High Quality Realstate Asistance</div>
    </div>
  </div>
  <div class="side-bar">
    <!--<img src="img/logo.png" alt="">-->
    <div class="home-button">
      Home
    </div>
    <div class="buy-button">
      Buy
    </div>
    <div class="sell-button">
      Sell
    </div>
    <div class="rent-button">
      Rent
    </div>
  </div>
  <div class="article1">
  </div>
  <div class="article2">
  </div>
  <div class="article3">
  </div>
</div>