Div重叠

Question

所以我要做的是制作一个水平列表，而不是使用ul和li。我试图对齐divs。这是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

如果要水平对齐div，请使用CSS-Flexbox 创建一个包含带CSS的div的父元素

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;

并删除绝对定位表单.card：

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

这应该这样做。