html - 包含多个重叠 div 的匹配容器

Question

我试图在一个 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>

我怎样才能让这些匹配和包含以达到我想要的效果？

Answer 1

你是说这个？对不起，如果我不明白你的话。

/*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>