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。标头标题应位于main-info内，但是当出现“ business”字样时，标头标题就会下移！ ！

Answer 1

这里的问题是，带有 business 类的图像正在溢出其自己的网格和其容器的网格。

为了解决此问题，请添加属性溢出：对.main-info类和.business类均隐藏。

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

一旦添加了这些内容，您就可以相应地调整.business类和.header-title类的网格行和网格列，以找到所需的位置。

下面的完整CSS和HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="foo"></div>

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;
}