.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>
Derzeit berühren sich meine Boxen nur horizontal, ich möchte aber auch, dass sie sich vertikal berühren. Ich habe versucht, nach Informationen dazu zu suchen, aber als ich etwas gefunden habe, das funktionierte, gab es ihnen mehr Höhe, als sie brauchten.
p
标签默认有一个margin
属性。设置margin: 0
来固定垂直间距。编辑:这不会创建砖石布局,只是删除盒子之间的空间。
编辑2
你可以:
到父级
fm-bubbles
。这将使子级保持其内容的高度,并消除子级之间的垂直空间。