.fm-bubbles { display: flex; flex-wrap: wrap; width: 100%; height: 100px; } .fm-bubble { flex: 1 1 10%; height: max-content; border: 1px solid royalblue; border-radius: 5px; }
<div class="fm-content"> <div class="fm-bubbles"> <p class="fm-bubble">Lorem, ipsum.</p> <p class="fm-bubble">lorem</p> <p class="fm-bubble">adsadad</p> <p class="fm-bubble">sss</p> <p class="fm-bubble">asdasda asdasda</p> <p class="fm-bubble">asss</p> <p class="fm-bubble">sss</p> <p class="fm-bubble">asdas asd</p> <p class="fm-bubble">adadaddd</p> <p class="fm-bubble">adadasd</p> <p class="fm-bubble">addd</p> <p class="fm-bubble">adadd</p> <p class="fm-bubble">ss</p> </div>
目前我的盒子只是水平接觸,但我也希望它們垂直接觸。我試圖搜索有關此的信息,但是當我確實找到有用的東西時,它給了他們比他們需要的更高的高度。
p
標籤預設有一個margin
屬性。設定margin: 0
來固定垂直間距。編輯:這不會創建磚石佈局,只是刪除盒子之間的空間。
編輯2
你可以:
到父級
fm-bubbles
。這將使子級保持其內容的高度,並消除子級之間的垂直空間。