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

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

.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 標(biāo)簽?zāi)J(rèn)有一個 margin 屬性。設(shè)置 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