CSS-изображение, перемещающее элемент сетки вниз - PullRequest
Новая
       10

CSS-изображение, перемещающее элемент сетки вниз

0 голосов
/ 27 января 2019

Итак, я пытался поместить изображение в сетку, но оно вызывает у меня проблемы.
В данный момент моя самая большая проблема заключается в том, чтобы толкнуть другой элемент сетки вниз. 

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», он сбрасывает заголовок заголовка вниз!!

1 Ответ

0 голосов
/ 27 января 2019

Проблема здесь в том, что ваше изображение с классом business переполняет свою собственную сетку и сетку своего контейнера.

Чтобы решить эту проблему, добавьте переполнение свойства: скрытое как в класс .main-info, так и в класс .business.

Этим классам также нужно свойство display: grid, чтобы браузер мог обрабатывать свойства grid-column и grid-row соответственно для этих двух классов.

Как только эти дополнения будут сделаны, вы можете настроить grid-row и grid-column для классов .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>
...