размещение div после css :: after - PullRequest
Новая
       9

размещение div после css :: after

5 голосов
/ 07 января 2020

У меня есть CSS ::after, который отображает изображение SVG.
Я бы хотел, чтобы мой контейнер отображал после этого изображения SVG.
Что происходит, так это то, что SVG "не занимает места", так сказать, и следующий DIV покрывается SVG.

спасибо за изучение этого. 

.overpass-info-container::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 0;
  height: 182px;
  width: 100%;
  background-color: white;
  background: url("../images/curve.svg") bottom center;
  background-size: 100%;
  outline: 1px solid red;
}

/*  finding container  */
section.finding-container {
  top: 180px;
  display: flex;
  position: absolute;
}

.find-agent {
  margin-left: auto;
  display: flex;
  flex-flow: column;
}

.agent-profiles {
  display: flex;
  flex-flow: column;
}
<!-- ***** finding container ***** -->
<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
  </div>
  <div class="agent-profiles">
    <img src="./images/profiles.svg" alt="profiles">
  </div>
</section>

Ответы [ 2 ]

2 голосов
/ 07 января 2020

In .overpass-info-container::after

  • Попробуйте добавить display: block
  • Попробуйте заменить position: absolute на position: relative

Эти изменения должны дать ::after его собственное пространство в HTML.

0 голосов
/ 07 января 2020

ну, я сделал что-то простое, все еще открыт для предложений. Я добавил каждому ребенку атрибут margin-top, и он позаботился о вещах ... 

section.finding-container {
  top: 180px;
  display: flex;
  position: absolute;
}
.find-agent {
  margin-top: 200px;
  margin-bottom: auto;
  margin-left: 0;
  display: inline-flex;
  flex-flow: column;
}
.agent-profiles {
  margin-top: 200px;
  display: inline-flex;
  flex-flow: column;
}

спасибо всем, кто пытался помочь ...

...