我有一个问题,我有一个父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>
答案 0 :(得分:0)
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类。
希望这有帮助。