Divs überlappend

Question

Also was ich versuche zu tun ist eine horizontale Liste zu machen, aber anstatt ul und li. Ich versuche divs auszurichten. Hier ist die JSFiddle

HTML:

<div class="card"> 
    <img src="img/toxiic-logo.jpg" alt="ToXiiC Avitar" style="width: 100%" /> 
    <div class="container"> 
     <h4><b>ToXiiC</b></h4> 
     <p>Founder and CTO</p> 
    </div> 
</div> 

Answer 1

Wenn Sie divs wollen horizontal auszurichten, verwenden CSS-Flexbox.
ein übergeordnetes Element Erstellen Sie die divs mit CSS

display: flex; 
flexflow: row wrap;  /* or no-wrap instead of wrap, if you want to make 100% sure, they are all in the same row, even if they don't really fit */ 
justify-content: space-around; 

und entfernen Sie die absolute Positionierung Form .card enthält:

position: absolute; 
left: 50%; 
transform: translateX(-50%); 

diese es tun sollten.