包含多个覆盖div的匹配容器
包含多个覆盖div的匹配容器
提问于 2019-04-24 00:49:45
我试图在一个wordpress站点上获得一个效果，该站点有两个行容器，其中一个容器中有一个图像，上面覆盖了文本偏移量的div。在本例中，我使用的是背景色，而不是图像。
我有差不多的效果布局，但我有两个问题，特别是父容器不包含内容，以及内容在宽度方面不匹配，如下例所示：
代码：
/*ACCOUNT FOR ALL SCREEN SIZES*/
@media only screen and (max-width : 1824px) {
}
p,h1,h2,h3,h4,h5,h6 {
font-family: "Gotham SSm", Verdana, Arial, sans-serif !important;
}
#slidingbar-area{
display:none;
}
#wrapper .button-round{
border-radius: 18px;
background-color: #fff;
}
.fusion-page-title-bar{
display:none !important;
}
.tfs-slider {
top:none !important;
}
.slide-content-container.slide-content-left{
top: 550px;
margin-left: -200px;
}
a#scroll-to-top{
display:none !important;
}
.callToActionText{
display: block;
font-weight: 300;
text-align: inherit;
margin-bottom: 0px;
font-size: 18px;
line-height: 2.25;
color: rgb(156, 164, 177);
}
/*offset cards on homepage*/
#cardwrapper{
/*display:flex;
justify-content:center;*/
padding-top:50px;
}
#cardparent{
width: 850px;
height:400px;
background-size:cover;
float:right;
}
#cardchild{
box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
background-color:white;
width:450px;
height:350px;
position:relative;
top:-50px;
right:40%;
text-align:inherit;
padding: 35px 45px;
}
.cardOffsetText{
font-weight: 300;
text-align: inherit;
margin-bottom: 0px;
font-size: 13px;
line-height: 2.25;
color: rgb(97, 104, 113)
}
#cardwrapper2{
/*display:flex;
justify-content:center;*/
padding-top:50px;
}
#cardparent2{
width: 850px;
height:400px;
background-size:cover;
float:left;
}
#cardchild2{
box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
background-color:white;
width:450px;
height:350px;
position:relative;
top:-50px;
left:90%;
text-align:inherit;
padding: 35px 45px;
}
.cardOffsetText2{
font-weight: 300;
text-align: inherit;
margin-bottom: 0px;
font-size: 13px;
line-height: 2.25;
color: rgb(97, 104, 113)
}
/****************************/<div id="cardWrapperParent" style="border: 4px solid black" >
<div id="cardwrapper2">
<div id="cardparent2" style="background-color:red;">
<div id="cardchild2">
<div class="cardOffsetTitle2"><h1> Benefits</h1></div>
<span class="cardOffsetText2"><p>Text</p></span>
</div>
</div>
</div>
</div>
<div id="cardWrapperParent" style="border: 4px solid black">
<div id="cardwrapper2">
<div id="cardparent2" style="background-color:blue;">
<div id="cardchild2">
<div class="cardOffsetTitle2"><h1> Benefits</h1></div>
<span class="cardOffsetText2"><p>Text</p></span>
</div>
</div>
</div>
</div>
如何匹配和包含这些内容才能达到我想要的效果？
Stack Overflow用户
回答已采纳
发布于 2019-04-24 01:07:34
你是说这个？如果我没听懂你的话，很抱歉。
/*ACCOUNT FOR ALL SCREEN SIZES*/
@media only screen and (max-width : 1824px) {
}
p,h1,h2,h3,h4,h5,h6 {
font-family: "Gotham SSm", Verdana, Arial, sans-serif !important;
}
#slidingbar-area{
display:none;
}
#wrapper .button-round{
border-radius: 18px;
background-color: #fff;
}
.fusion-page-title-bar{
display:none !important;
}
.tfs-slider {
top:none !important;
}
.slide-content-container.slide-content-left{
top: 550px;
margin-left: -200px;
}
a#scroll-to-top{
display:none !important;
}
.callToActionText{
display: block;
font-weight: 300;
text-align: inherit;
margin-bottom: 0px;
font-size: 18px;
line-height: 2.25;
color: rgb(156, 164, 177);
}
/*offset cards on homepage*/
#cardwrapper{
/*display:flex;
justify-content:center;*/
}
#cardparent, #cardparent2{
width: 100%;
height:400px;
background-size:cover;
}
.cardOffsetText{
font-weight: 300;
text-align: inherit;
margin-bottom: 0px;
font-size: 13px;
line-height: 2.25;
color: rgb(97, 104, 113)
}
#cardwrapper2{
/*display:flex;
justify-content:center;*/
}
#cardchild2{
box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
background-color:white;
position: relative;
top: -20px;
left:70%;
width:250px;
text-align:inherit;
padding: 35px 45px;
}
.cardOffsetText2{
font-weight: 300;
text-align: inherit;
margin-bottom: 0px;
font-size: 13px;
line-height: 2.25;
color: rgb(97, 104, 113)
}
/****************************/<div id="cardWrapperParent" style="border: 4px solid black; margin-bottom:5px; margin-top:20px" >
<div id="cardwrapper2">
<div id="cardparent2" style="background-color:red">
<div id="cardchild2">
<div class="cardOffsetTitle2"><h1> Benefits</h1></div>
<span class="cardOffsetText2"><p>Text</p></span>
</div>
</div>
</div>
</div>
<div id="cardWrapperParent" style="border: 4px solid black">
<div id="cardwrapper2">
<div id="cardparent2" style="background-color:blue;">
<div id="cardchild2">
<div class="cardOffsetTitle2"><h1> Benefits</h1></div>
<span class="cardOffsetText2"><p>Text</p></span>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55815962
复制相关文章
相似问题
腾讯云开发者
