Probleme mit reaktionsschneller und absoluter Positionierung

Question

Ich erstelle gerade eine Seite für Fallstudien, die ein Hauptbannerbild gefolgt von 3 Zeilen mit 3 Teilbildern enthält. Jedes Bild wird über die Eigenschaft background-image hinzugefügt, sodass die Divs die gleiche Höhe beibehalten können. Die divs haben einen Hover-Container über dem ich gerne immer oben wäre, aber wenn ich an meinen Breakpoint (850px und darunter) komme, ist es schwer, ohne präzise Pixel die Abdeckung oben auf dem Container zu halten. Gibt es einen einfacheren Weg, als das, was ich tue?

Hier ist die grundlegende HTML-Struktur I

<div class="study-list"> 
<a href="#"> 
    <div class="study-block left"> 
     <div class="left-case-cover"> 
      <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div> 
      <div class="case-study-cta">Click here to read more</div> 
     </div> 
     <div class="study study1"></div> 
    </div> 
</a> 
<a href="#"> 
    <div class="study-block center"> 
     <div class="center-case-cover"> 
      <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div> 
      <div class="case-study-cta">Click here to read more</div> 
     </div> 
     <div class="study study2"></div> 
    </div> 
</a> 
<a href="#"> 
    <div class="study-block right"> 
     <div class="rightt-case-cover"> 
      <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div> 
      <div class="case-study-cta">Click here to read more</div> 
     </div> 
     <div class="study study3"></div> 
    </div> 
</a> 

ich fast sicher bin mit mir dies nicht aufgrund der Tatsache arbeitet, dass die covers absolut über den case-studys positioniert werden. Gibt es einen besseren Weg, oder kann jemand von euch mir dabei helfen? Es sieht gut für Bildschirmgrößen 851px und höher aus, muss nur einen Weg finden, um dies in mobilen arbeiten zu bekommen.

Hier ist ein Fiddle meines aktuellen Problems, kann es helfen, es in Vollbild zu erweitern.

Vielen Dank für die Hilfe!

---

Dinge, die ich habe versucht:

• Ich habe versucht, um den Behälter zu machen, dass die Abdeckung eine gewisse Breite hält dann overflow:hidden das überschüssige schweben zu verbergen, aber das hat nicht funktioniert.

• Ich habe versucht, dies mit präzisen Pixeln zu tun, aber das hat mich auch im Stich gelassen.

Answer 1

Versuchen Sie, position: relative; zu dem Eltern von Abdeckung DOM hinzuzufügen. Stellen Sie außerdem sicher, dass die Abdeckung von top: 0, left: 0 beginnt und als bottom:0 und right:0 endet.

Sie müssen möglicherweise einen Clearfix für die richtigen Ausrichtungen tun, um sicherzustellen, dass die Überlappung aufeinanderfolgender DOMS nicht auftritt. (für < 850px Auflösung allein). Wenn Sie dies für generisches HTML hinzufügen, wird Ihre Desktop-Auflösung möglicherweise beschädigt.