🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付
pchun  ·  03月08日

在自學網頁の嬰兒教材:第3課 ── 網頁排版,練習使用 inline-block 版面配置,但一直無法變成如圖下那樣,請問是少了甚麼東西嗎?
謝謝!
https://jsfiddle.net/u2bkycxL/1/


此人尚未填寫簡介。
按讚的人:

共有 6 則留言

inline-block會讓元素和元素之間有空隙
這篇參考一下
https://ithelp.ithome.com.tw/m/articles/10247993
也可以往這方面去搜尋

按讚的人:

我想問的是怎麼變成這樣

還是是因為空隙的問題,讓他沒有辦法變那樣嗎

按讚的人:

對,因為有空隙,所以會換行
我用參考連結的其中一個方法修改,如下

nav {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}

nav ul li {
  font-size: 16px;
}

.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

.column p {
  font-size: 16px;
}

.elem {
  position: relative;
  border: 2px solid;
  font-size: 0;
}

p {
  margin: 10px;
}

* {
  box-sizing: border-box;
}
按讚的人:

路過補充一下:

現在因為各瀏覽器支援成熟了,版面配置大多都用 Flexbox 來排版了

按讚的人:

此人尚未填寫簡介。
🏆 本月排行榜
🥇
站長阿川
📝20   💬9   ❤️5
709
🥈
我愛JS
📝4   💬14   ❤️7
255
🥉
御魂
💬1  
3
#5
2
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付