我有一個 div 容器,其中包含 3 個不同的 div。我想將內部 div 排成一行。這是html代碼: 這就是它應該的樣子。.partners { display: inline-block; display: flex; flex-direction: row; width: 100%}<div class="partners"> <div> <img src="media/handshake.png" alt="handshake" class="handshake"> <h1>10+</h1> <p>partners investing their time and effort to support our mission</p> </div> <div> <img src="media/social-care.png" alt="social care" class="social-care"> <h1>150+</h1> <p>members working hard to be able to support our mission</p> </div> <div> <img src="media/respect.png" alt="respect" class="respect"> <h1>243+</h1> <p>donors supporting our community and making impossible possible</p> </div></div>但最后一個內部 div 超出了屏幕,當我檢查頁面時,它顯示“合作伙伴” div 僅包含第一個和第二個內部 div。我該如何解決這個問題? 這是我檢查時的樣子。第三個不包含在“合作伙伴”中。 div
3 回答

達令說
TA貢獻1821條經驗 獲得超6個贊
這將解決您的問題。
.partners{
justify-content:space-around;
display: flex;
width: 100%;
}
.partners div{
width:30%;
}

胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
ypu 可以設置子 div 的最大寬度,使用類似 .partners div { width: 30% }
并在它們之間添加一些空間,您也可以使用 .partners { justify-content: space-between; }
提示: 當你在上面放置另一個display: flex時,display inline-block被取消,嘗試只使用flex
- 3 回答
- 0 關注
- 206 瀏覽
添加回答
舉報
0/150
提交
取消