div重叠并保持响应

Question

我在这里有点问题。我试图获得此页面，以便在桌面上它具有交替的图像流，其中包含文本偏移和覆盖的卡片，在第一个示例

中，它工作正常

因此它将从此处开始，下一张图像将在右侧，而叠印卡在左侧，并保持交替显示。在台式机上，想法是它们以相同的方式在卡/图像部分之间以相同的空间流动，而不管卡的长度是短还是长（更多文本）

现在，当我将页面缩小到整个移动尺寸时，我具有所需的总体布局，除了那里还有一个问题，就是卡片部分重叠在下一个卡片部分的顶部。

我该如何解决台式机上的偏移/间隙问题，但又为移动设备提供同等的空间？

笔在这里：https://codepen.io/anon/pen/zVdNXL

.callToActionText{
    display: block;
    font-weight: 300;
    text-align: inherit;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 2.25;
    color: rgb(156, 164, 177);
}

.jWuUNX {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    margin: 0px auto;
}
.bg-white {
    background: #fff;
}

.hide-overflow-x {
    overflow-x: hidden;
}


article{
  display:block;
}

main{
  display:block;
}

.lvZRD {
    min-height: 50vh;
    padding: 80px 0px;
    margin-bottom:200px;
}

.eNpugc {
    max-width: 1440px;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fuYpln {
    overflow: hidden;
}

.chuVCt {
    max-height: 480px;
    cursor: pointer;
    position: relative;
    width: 100%;
}

.cdhhEw {
    position: absolute;
    bottom: 50%;
    transform: translate(50%);
    right: 50%;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 10px);
}

.kJGXut {
    width: 55px;
    height: 55px;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    box-sizing: initial;
    background: transparent;
    padding: 0px;
    border-radius: 100px;
}

.fuzbkA {
    position: absolute;
    z-index: 60;
    padding: 0px 30px;
}

.ckwpzP {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 100;
    text-align: left;
    background: rgb(255, 255, 255);
}

.izjVlt {
    font-size: 27px;
    font-family:'Times New Roman';
    line-height: 1.5;
    font-weight: 400;
    color: rgb(69, 77, 84);
    margin-bottom: 24px;
}

.jpddbB {
    display: block;
    font-weight: 300;
    text-align: inherit;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 2.25;
    color: rgb(97, 104, 113);
}

.kNTftn {
    padding-bottom: 85px;
    position: relative;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
}
.jruQOv {
    margin-top: 92px;
    margin-bottom: 20px;
    position: absolute;
    opacity: 0.2;
    color: rgb(167, 175, 188);
    left: 0px;
    width: 100%;
    border-width: 2px;
    border-style: solid;
    border-color: initial;
    border-image: initial;
  box-sizing: content-box;
    height: 0;
}

.ktrBmY {
    width: 100%;
    margin-top: 25px;
    display: inline-block;
}

.dJDUPg {
    text-align: center;
}


.bHgSIS {
    max-width: 164px;
    display: inline-block;
    text-align: center;
    margin: 20px 0px;
}

.hlypoQ {
    width: 54px;
    height: 54px;
    font-family: 'FontAwesome';
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    box-sizing: initial;
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 100px;
}

.bTZMxL {
    padding-bottom: 15px;
    background: rgb(255, 255, 255);
}

.erLuwx {
    display: block;
    font-weight: 300;
    text-align: inherit;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 1.5;
    color: rgb(97, 104, 113);
}


.hDOnrl {
    min-height: 50vh;
    padding: 80px 0px;
}

.fqUDXq {
    max-width: 1440px;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
}

.htSAJx {
    overflow: hidden;
}

.cwCFzv {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 100;
    text-align: left;
    padding: 30px 40px;
    background: rgb(255, 255, 255);
}

.jULdGM {
    font-size: 27px;
    font-family:'Times New Roman';
    line-height: 1.5;
    font-weight: 400;
    color: rgb(69, 77, 84);
    margin-bottom: 24px;
}

.lciScj {
    display: block;
    font-weight: 300;
    text-align: inherit;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 2.25;
    color: rgb(97, 104, 113);
}

.wxuto {
    position: absolute !important;
    z-index: 60;
    padding: 0px 30px;
}


@media (min-width: 992px){
.col-md-offset-4 {
    margin-left: 33.33333333%;
}
}
@media (min-width: 992px){
.col-md-offset-0 {
    margin-left: 0;
}
}
@media (min-width: 1300px){
.cwCFzv {
    padding: 45px 55px;
}
}
@media (min-width: 992px){
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
}
@media (min-width: 992px){
.col-md-5 {
    width: 41.66666667%;
}

}
@media (min-width: 992px){
.col-md-8 {
    width: 66.66666667%;
}
}
@media (min-width: 992px){
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
}





/**********************/





@media (min-width: 992px){
.col-md-offset-1 {
    margin-left: 8.33333333%;
}
}
@media (min-width: 992px){
.col-md-2 {
    width: 16.66666667%;
}
}
@media (min-width: 992px){
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
}
@media (min-width:1300px){
  .ckwpzP {
    padding: 45px 55px;
}
}

@media (min-width: 768px){
.ckwpzP {
    padding: 40px;
}
}

@media (min-width:992px){
  .col-md-offset-0 {
    margin-left: 0;
}
  .ckwpzP {
    padding: 40px 50px 35px;
}
  .col-md-8 {
    width: 66.66666667%;
}
  .col-md-offset-7 {
    margin-left: 58.33333333%;
}
  .col-md-5 {
    width: 41.66666667%;
}
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
}

.hDOnrl2 {
    min-height: 50vh;
   
}

.htSAJx.col-md-12 {
    padding-right: 0px;
    padding-left: 0px;
}

.htSAJx {
    overflow: hidden;
}

.jTBujm {
    max-height: initial;
    cursor: initial;
    position: relative;
    width: 100%;
}

.jTBujm img {
    width: 100%;
}

.fqUDXq {
    max-width: 1440px;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wxuto {
    position: absolute;
    z-index: 60;
    padding: 0px 30px;
}

@media (min-width: 992px){
.col-md-offset-7 {
    margin-left: 58.33333333%;
}
}

@media (min-width: 992px){
.col-md-5 {
    width: 41.66666667%;
}
}

.cwCFzv {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 100;
    text-align: left;
    padding: 30px 40px;
    background: rgb(255, 255, 255);
}

@media (min-width: 1300px){
.cwCFzv {
    padding: 45px 55px;
}

.jULdGM {
    font-size: 27px;
    font-family:'Times New Roman';
    line-height: 1.5;
    font-weight: 400;
    color: rgb(69, 77, 84);
    margin-bottom: 24px;
}

.lciScj {
    display: block;
    font-weight: 300;
    text-align: inherit;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 2.25;
    color: rgb(97, 104, 113);
}
}

.dmbg {
    background-color: #fff;
    padding: 20px 0;
    text-align: center;
}

.jULdGM {
    font-size: 27px;
    font-family:'Times New Roman';
    line-height: 1.5;
    font-weight: 400;
    color: rgb(69, 77, 84);
    margin-bottom: 24px;
    padding-top:30px;
}

.dmBg-vertical {
    padding: 20px 0 60px;
}


@media (min-width: 992px){
.tfs-slider .background-image{
    background-position: 0 0 !important;
}

.col-md-11 {
    width: 100%;
}
}

.dmBg-vertical .col-xs-12 {
    padding: 0 35px;
}

@media (min-width: 768px){
.separator-big-small {
    border-right: 2px solid #e8e8e8;
}
}

@media (min-width: 768px){
.col-sm-6 {
    width: 50%;
}
}

.cXmEBU {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    color: rgb(69, 77, 84);
    margin-bottom: 5px;
}

.lciScj {
    display: block;
    font-weight: 300;
    text-align: inherit;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 2.25;
    color: rgb(97, 104, 113);
}

.iACmBG {
    max-width: 540px;
    margin: 0px auto;
}

.dmBg-vertical .col-xs-12 {
    padding: 0 35px;
}

@media (min-width: 768px){
.col-sm-6 {
    width: 50%;
}

.cXmEBU {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    color: rgb(69, 77, 84);
    margin-bottom: 5px;
}
}

/***Mobile stylings***/

@media (max-width: 700px){


.hDOnrl{
    margin-bottom:300px;
}

.lvZRD{
    margin-bottom:300px;
}

.hDOnrl2{
    margin-bottom:400px;
}

.wxuto{
    transform:translate3d(40px,-49.2139,0px) !important;
}

.pbcColOne{
    padding:65px;
}

}

<!-- wp:html -->
<div class="sc-brqgnP lvZRD" style="margin-bottom: 400px;">
<div style="margin: 0; display: block;">
<div style="margin: 0; display: block;">
<div class="sc-EHOje eNpugc row">
<div class="sc-jAaTju fuYpln col-md-8 col-md-offset-0">
<div class="sc-jDwBTQ chuVCt">
<div class="sc-cMljjf cdhhEw sc-bZQynM kJGXut"></div>
<img src="https://via.placeholder.com/1250x850" />

</div>
</div>
<div class="sc-gPEVay fuzbkA col-md-5 col-md-offset-7" style="transform: translate3d(0px, -83.6149px, 0px);">
<div class="sc-iRbamj ckwpzP">
<div class="sc-bwzfXH izjVlt">About Us</div>
<span style="font-weight: 400;">We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and -- we offer a concierge service (management and patient referral service) for doctors that specializes in converting "insurance" practices to the "membership" model.</span>

</div>
</div>
</div>
</div>
</div>
</div>
<!-- /wp:html -->

<!-- wp:html -->
<div class="sc-cvbbAY hDOnrl">
<div>
<div class="sc-ifAKCX fqUDXq row">
<div class="sc-brqgnP htSAJx col-md-8 col-md-offset-4">
<div class="sc-cMljjf ktDtlN"><img src="https://via.placeholder.com/1250x850" /></div>
</div>
<div class="sc-jAaTju wxuto col-md-5 col-md-offset-0" style="transform: translate3d(0px, -49.2139px, 0px);">
<div class="sc-jDwBTQ cwCFzv">
<div class="sc-bdVaJa jULdGM">Our Mission</div>
<span class="sc-bwzfXH lciScj">Our mission is twofold:
1) To free doctors from the “fee for service” practice model that has placed increasing demands on doctors requiring high volume of patients and exhaustive documentation with a medical membership model that allows doctors to do what they do best -- practice medicine
2) To offer patients Direct Primary Care medical memberships that include genetic testing to identify health risks, create patients health baseline and build a preventative health care plan for patients to monitor their progress on our mobile app and Anti-Aging memberships that offer preferential services and discounted procedures for a monthly fee.</span>

</div>
</div>
</div>
</div>
</div>

<!-- wp:html -->
<div class="sc-brqgnP lvZRD" style="margin-bottom: 400px;">
<div style="margin: 0; display: block;">
<div style="margin: 0; display: block;">
<div class="sc-EHOje eNpugc row">
<div class="sc-jAaTju fuYpln col-md-8 col-md-offset-0">
<div class="sc-jDwBTQ chuVCt">
<div class="sc-cMljjf cdhhEw sc-bZQynM kJGXut"></div>
<img src="https://via.placeholder.com/1250x850" />

</div>
</div>
<div></div>
<div class="sc-gPEVay fuzbkA col-md-5 col-md-offset-7" style="transform: translate3d(0px, -63.6149px, 0px);">
<div class="sc-iRbamj ckwpzP">
<div></div>
<div class="sc-bwzfXH izjVlt">Patient Benefits</div>
<span class="sc-htpNat jpddbB">Medical Memberships for Direct Primary Care and Anti-Aging (Cosmetic Dermatology) provide patients with personalized, accessible care on an unlimited basis. Membership doctors have only hundreds of patients at any given time, compared to the thousands that traditional doctors see that leads to better service from your physician and improved health for the patient. Visit our "Patients" page for a list of benefits.</span>

</div>
</div>
</div>
</div>
</div>
</div>
<!-- /wp:html -->

<!-- wp:html -->
<div class="sc-cvbbAY hDOnrl">
<div>
<div class="sc-ifAKCX fqUDXq row">
<div class="sc-brqgnP htSAJx col-md-8 col-md-offset-4">
<div class="sc-cMljjf ktDtlN"><img src="https://via.placeholder.com/1250x850" /></div>
</div>
<div class="sc-jAaTju wxuto col-md-5 col-md-offset-0" style="transform: translate3d(0px, -49.2139px, 0px);">
<div class="sc-jDwBTQ cwCFzv">
<div></div>
<div></div>
<div></div>
<div class="sc-bdVaJa jULdGM">Doctor Benefits</div>
<span class="sc-bwzfXH lciScj">Physician practices described as “membership medicine” for Direct Primary Care have been springing up across the country during the past decade and expanding to Anti-Aging (Cosmetic Dermatology). These practices, in which patients pay a monthly or annual retainer to their doctor or medical office for a contracted bundle of services, offer an alternative model for physicians who hope to spend less time on paperwork and more time with patients. Visit our "Doctors" page for a list of benefits.</span>

</div>
</div>
</div>
</div>
</div>

<!-- wp:html -->
<div class="sc-brqgnP lvZRD" style="margin-bottom: 400px;">
<div style="margin: 0; display: block;">
<div style="margin: 0; display: block;">
<div class="sc-EHOje eNpugc row">
<div class="sc-jAaTju fuYpln col-md-8 col-md-offset-0">
<div class="sc-jDwBTQ chuVCt">
<div class="sc-cMljjf cdhhEw sc-bZQynM kJGXut"></div>
<img src="https://via.placeholder.com/1250x850" />

</div>
</div>
<div class="sc-gPEVay fuzbkA col-md-5 col-md-offset-7" style="transform: translate3d(0px, -63.6149px, 0px);">
<div class="sc-iRbamj ckwpzP">
<div></div>
<div></div>
<div class="sc-bwzfXH izjVlt">Employer Benefits</div>
<span class="sc-htpNat jpddbB">Medical memberships combined with wrap around health insurance policies have proven to generate healthier employees, improve attendance, increase benefits offerings and overall cost savings per employee. The health insurance industry continues to change and cost of employee coverage increases, many businesses are finding it harder than ever to cover employees without taking a serious hit to their finances. Traditional health insurance for employees can be one of the largest costs incurred throughout the fiscal year. Our in-house insurance broker can offer customized group health ACA conforming health insurance plans for any size and type of business to improve your employees health and save money. Visit our "Employer" page for a list of benefits.
</span>

</div>
</div>
</div>
</div>
</div>
</div>
<!-- /wp:html -->

Answer 1

该问题来自您的变换内联样式：

style="transform: translate3d(0px, -83.6149px, 0px);"

因此，当屏幕尺寸更改时，您需要将其删除。删除它，它不会与图片重叠。