Flexbox 設計:我希望文字氣泡的各個側面都接觸
P粉002546490
P粉002546490 2024-04-01 10:59:44
0
1
352

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

目前我的盒子只是水平接觸,但我也希望它們垂直接觸。我試圖搜索有關此的信息,但是當我確實找到有用的東西時,它給了他們比他們需要的更高的高度。

P粉002546490
P粉002546490

全部回覆(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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板