我有一个部分,该部分的顶部和底部应该有150px的填充,但是无论如何,我都无法显示该填充。示例如下:http://new.cajunland.com/recipe/double-seasoned-cajun-hamburgers/
这是该部分的代码:
.wp-block-mkl-section-block .section-bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
max-width: none;
z-index: 0;
}
section.section-hero .wp-block-columns.has-2-columns {
max-width: 1080px;
margin: 0 auto;
}
.wp-block-columns {
flex-wrap: nowrap;
}
.wp-block-columns {
display: flex;
flex-wrap: wrap;
}
*, ::before, ::after {
box-sizing: inherit;
}
.wp-block-column.col-two-third {
flex-basis: calc(60% - 16px);
}
.wp-block-column {
margin-bottom: 0 !important;
}
.wp-block-column {
flex-basis: calc(50% - 16px);
flex-grow: 0;
}
.wp-block-column {
flex-grow: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
}
.wp-block-column.col-one-third {
background: rgb(255,255,255,.9);
flex-basis: calc(40% - 16px);
padding: 16px 24px;
}
<section class="wp-block-mkl-section-block section-hero" style="padding-bottom:150px;padding-top:150px">
<div class="section-bg bg__stretched" style="background: url(http://new.cajunland.com/wp-content/uploads/2019/10/recipe-double-seasoned-cajun-burger.jpg) no-repeat fixed center/100%">
<div class="wp-block-columns has-2-columns">
<div class="wp-block-column col-two-third">
<p> </p>
</div>
<div class="wp-block-column col-one-third">
<h1>Double Seasoned Cajun Hamburgers</h1>
<p style="color:#000;"><strong>Yield:</strong> 4<br><strong>Prep Time:</strong> 15 minutes<br><strong>Cook Time:</strong> 10-15 minutes</p>
</div>
</div>
</div>
</section>
答案 0 :(得分:1)
我检查了您的示例页面padding-top,并且padding-bottom正在运行。见下文
但是您已经通过使用 position:absolute 修复了section-bg部分,因此对top和bottom进行填充是有效的,但是没有任何作用。 您必须将填充内容分配给section-bg类。
.wp-block-mkl-section-block .section-bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
max-width: none;
z-index: 0;;
padding-bottom: 150px;
padding-top: 150px;
}
答案 1 :(得分:0)
有填充物,但.section-bg框具有position: absolute
和top: 0
。
您可以增加最大值,然后将background属性移到该部分。也许使用height: 300px
代替填充。
答案 2 :(得分:0)
尝试一下并删除填充:内联样式的顶部和底部为150px。
.wp-block-mkl-section-block .section-bg {
position: absolute; /* Remove this line */
padding-bottom: 150px!important; /* Add !important */
padding-top: 150px; /* Add !important */
top: 0; /* Remove this line */
left: 0; /* Remove this line */
bottom: 0; /* Remove this line */
right: 0; /* Remove this line */
background-repeat: no-repeat;
max-width: none;
z-index: 0;
margin: 0 auto;
}
答案 3 :(得分:0)
我解决了。 Jaakko在切换位置方面是部分正确的:.section-bg div中的绝对位置相对于相对位置。我也将背景图像移到了父部分,所以现在就在其中。固定所有。谢谢大家。