如何並排顯示卡片內的兩個div

Question

我正在嘗試提供以下卡片以獲取個人資料詳細信息。 但是網格系統沒有給我預期的結果。 任何幫助將不勝感激。

輸出：

預期結果：

代碼：

Answer 1

以下是如何使用網格來做到這一點：

它非常相似，主要區別是網格模板列，我建議使用 Flexbox，因為這是一個一維問題，而 Flex 正是為了解決這個問題而構建的。 Flex 和 Grid 最好一起使用 :D

 .grid-container { display: grid; width: 300px; grid-template-columns: 1fr 3fr; column-gap: 25px; align-items: center; border: 1px solid #f4f4f4; } .icon img { height: 100px; } .info label { display: block; }

 <div class="grid-container"> <div class="icon"> <img src="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png" /> </div> <div class="info"> <label>First Name</label> <label>Last Name</label> <label>Position</label> <label>Identification No.</label> <label>Email</label> </div> </div>

Answer 2

我建議在父容器中使用 Display Flex 並將標簽設置為塊元素，以便它們位於單獨的行上。

我重新創建了類似的東西，如果您有任何問題，請告訴我。

最好的事物，

安德魯

 .flex-container { display: flex; gap: 30px; align-items: center; border: 1px solid #f4f4f4; width: 300px; } .icon img { height: 100px; } .info label { display: block; }

 <div class="flex-container"> <div class="icon"> <img src="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png" /> </div> <div class="info"> <label>First Name</label> <label>Last Name</label> <label>Position</label> <label>Identification No.</label> <label>Email</label> </div> </div>

看看你做了什么，如果你有任何問題，請告訴我。