Flexbox-Design: Ich möchte, dass sich alle Seiten der Textblase berühren
P粉002546490
P粉002546490 2024-04-01 10:59:44
0
1
360

.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粉002546490
P粉002546490

Antworte allen(1)
P粉738346380

p 标签默认有一个 margin 属性。设置 margin: 0 来固定垂直间距。

编辑:这不会创建砖石布局,只是删除盒子之间的空间。

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

Lorem, ipsum.

lorem

adsadad

sss

asdasda asdasda

asss

sss

asdas asd

adadaddd

adadasd

addd

adadd

ss

编辑2

你可以:

align-items: flex-start;
   align-content: flex-start;

到父级 fm-bubbles。这将使子级保持其内容的高度,并消除子级之间的垂直空间。

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  align-items: flex-start;
  align-content: flex-start;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

Lorem, ipsum.

lorem

adsadad

sss

asdasda asdasda

asss

sss

asdas asd

adadaddd

adadasd

addd

adadd

ss

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage