国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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
548

.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 標(biāo)簽?zāi)J(rèn)有一個 margin 屬性。設(shè)置 margin: 0 來固定垂直間距。

編輯:這不會創(chuàng)建磚石布局,只是刪除盒子之間的空間。

.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。這將使子級保持其內(nèi)容的高度,并消除子級之間的垂直空間。

.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

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