使用 inline-block 版面配置

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

pchun

此人尚未填寫簡介。

1個讚 6留言 4,148瀏覽

按讚的人：

共有 6 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

birdie 2年前

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

1個讚回覆

按讚的人：

pchun 2年前

我想問的是怎麼變成這樣

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

1個讚回覆

按讚的人：

birdie 2年前

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

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;
}

2個讚回覆

按讚的人：

pchun 2年前

了解，感謝您!

0個讚回覆

回覆 birdie......

站長阿川 2年前

路過補充一下：

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

1個讚回覆

按讚的人：

pchun 2年前