Reka bentuk Flexbox: Saya mahu semua sisi gelembung teks disentuh
P粉002546490
P粉002546490 2024-04-01 10:59:44
0
1
395

.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>

Pada masa ini kotak saya hanya menyentuh secara mendatar, tetapi saya juga mahu ia menyentuh secara menegak. Saya cuba mencari maklumat mengenai perkara ini, tetapi apabila saya menemui sesuatu yang berkesan, ia memberi mereka ketinggian lebih daripada yang mereka perlukan.

P粉002546490
P粉002546490

membalas semua(1)
P粉738346380

p 标签默认有一个 margin 属性。设置 margin: 0 untuk menetapkan jarak menegak.

EDIT: Ini tidak mencipta letak batu, cuma mengalih keluar ruang antara kotak.

.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

Edit 2

Anda boleh:

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

Kepada ibu bapa fm-bubbles. Ini akan membuatkan kanak-kanak mengekalkan ketinggian kandungannya dan menghilangkan ruang menegak antara kanak-kanak.

.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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan