html - 在父元素上填充而不将子元素保留在内部

Question

我有一个问题，我有一个父 div (section__info__wrap)，其位置相对于我在所有 4 个边上应用了填充，子元素是一个绝对 div (section__info) 但填充似乎只在左侧正确应用。我在下面添加了一个带有我所有标记的 fiddle 以显示发生了什么。

如果我删除 div (section__info__wrap) 并将填充直接应用到绝对定位元素 (section__info) 它工作正常。

我知道这无疑是一件简单的事情，但我就是无法弄清楚发生了什么。

https://jsfiddle.net/1sp30h70/2/

body {
  font-family: sans-serif;
  background-color: #fff;
  position: relative;
  font-weight: 300;
  color: #000000;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  width: 100%;
}

.section__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.section__info__wrap {
  position: relative;
  height: 100%;
  padding: 0 5rem;
}

.section__info {
  position: absolute;
  bottom: 13%;
  //padding: 0 10rem;
}

.section__text {
  font-size: 16px;
}

.intro__img {
  height: 100vh;
  background-color: red;
}

.col-med-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.secondary__heading {
  font-size: 1.8rem;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 6px;
  margin-bottom: 3rem;
  color: #000000;
}

.secondary__heading::before {
    content: "";
    display: block;
    background: #000000;
    width: 100%;
    height: 1px;
    margin-bottom: 3rem;
}

<section class="section intro">
  <div class="section__inner">
    <div class="col-med-6 no-padding">
      <div class="intro__img"></div>
    </div>
    <div class="col-med-6 no-padding">
      <div class="section__info__wrap">
        <div class="section__info">
          <h3 class="secondary__heading">Im a heading</h3>
          <p class="section__text">This is test text, This is test text,This is test text,This is test text, This is test text, This is test text, This is test text, This is test text.</p>
        </div>

      </div>
    </div>
  </div>
</section>

Answer 1

Rufus 由于您正在为 section__info__wrap 类使用 position:relative，因此您还需要使用 float 属性来使填充正常工作。

检查这个https://jsfiddle.net/1sp30h70/4/ .

我将 float:left; 添加到 section__info__wrap 类。

希望这对您有所帮助。