Question

我有一个问题，我有一个父div（section__info__wrap）与位置相对，我已经在所有4边应用了填充，子元素是绝对div（section__info）但填充似乎只在左侧正确应用。我在下面添加了一个小提琴，用我的标记来表示发生了什么。

如果我删除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由于您使用my_df = spark.read.jdbc(url=jdbc_url, table='gwdd_data', properties= connectionProperties) my_df.limit(10).show()作为position:relative类，因此还需要使用float属性进行填充才能正常工作。

检查此https://jsfiddle.net/1sp30h70/4/。

我将section__info__wrap添加到section__info__wrap类。

希望这有帮助。

在父元素上填充不保留子元素

1 个答案: