Wie erstelle ich diese Art von Absatz

Question

Ich möchte eine Website machen und ich brauche einen Absatz genau so.

Grube wie folgt aussehen:

Hier ist der Code:

<section id="services" style="background-image:url(img/header-bg2.png); background-size:cover; background-position:right; background-repeat:repeat; min-height:100vh"> 
    <div class="container"> 
    <div class="col-xs-4" style="background-color:#FFF"> 
     <div class="col-xs-6"> 
     <img src="imagini/1.png" class="img-responsive img-circle" style="min-width:180px; min-height:180px" > 
     </div> 
     <div class="col-xs-6"><br> 
      Titlu de test Titlu de test Titlu de test <br><br><br> 
     </div> 

     <div class="col-xs-12" style="background-color:#FFF"><br> 
      Aici vine contextul care este tot de test 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <img src="imagini/1.png" class="img-circle" width="200px" height="200px"> 

    </div> 
    <div class="col-xs-4"> 
     <img src="imagini/1.png" class="img-circle" width="200px" height="200px"> 
    </div> 
     <div class="row"> 
     </div> 
    </div> 
</section> 

Answer 1

Es scheint mir, wie Sie von der CSS position machen müssen.

Sie könnten versuchen, position: relative zu Ihrem Bild Eltern hinzuzufügen und position: absolute zu Ihrem Bild hinzufügen.

Dann geben Sie Ihrem Bild einen Spitzenwert von -50%. Dies bewirkt, dass die Hälfte des Bildes um 50% aus dem übergeordneten Element entfernt wird.

Siehe Geige:

https://jsfiddle.net/cfqu2hms/1/