如何並排均勻分布元素？

Question

我正在嘗試為網站制作團隊個人資料，我想要的是 3 個個人資料以水平均勻地顯示。

<div>
    <span>
        <img>
        <span></span>
    </span>
    <span>
        <img>
        <span></span>
    </span>
    <span>
        <img>
        <span></span>
    </span>
</div>

現在輸出是：

<img><span><img><span><img><span>

預期輸出：

<img>   <img>   <img>
<span>  <span>  <span>

Answer 1

您可以使用 flex 或 grid。 像這樣的東西：

div {
  display: flex;
  justify-content: space-evenly;
}

div > span > * { //this is to move the spans below the imgs
  display: block;
}

Answer 2

您可以將每個配置文件放在一個內聯 div 中並使 span 成為一個塊元素，例如

 img{width:70px;} span{display:block} .inline{display:inline-block;}

 <div> <div class="inline"> <span> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> <span>User</span> </span> </div> <div class="inline"> <span> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> <span>User</span> </span> </div> <div class="inline"> <span> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> <span>User</span> </span> </div> </div>

每個 div 包裝圖像，用戶和它本身是內聯的，添加另一個 div 。