作者hijkxyzuw (i,j,k) ×(x,y,z)
看板Web_Design
標題[討論] 如何作出『儘量小』的block
時間Sat Dec 12 15:05:38 2015
就是想作出和內容一樣大的block, 區塊元素。
像是如果div的內容全部浮動後，div就會『塌陷』到0高度。
因為div是block, 高度是由內容決定的。
全部浮動後就『沒有內容』了。
但一般的div的寬度都是100%, 也就是和父元素等寬；
當然也可以自己指定。
我是想作出寬度塌陷的區塊元素，也就是寬度由子元素決定的塊元素。
我發現只要`display: inline-block; `就可以了。
inline-block的寬度是由內容決定的。
樣式是用在讓figure的大小縮到和內容一樣。
因為我網站的側邊欄是用float的，會把img擠到右邊；
但figure還是100%，這時figcaption用`text-align: center; `會跑掉。
如果figure和img一樣大就沒這問題了。
小技巧分享給大家；
如有更好的解法也歡迎分享。
--
「只有當你可以直視對方眼睛的時候，對方才也可以直視你的眼睛。」
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.116.102.31
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1449903943.A.A1F.html
發現問題，如果figure是inline-block, 會沒辦法置中。
（置中的方法是在它的母元素設`text-align: center; `. ）
三小啊，要我在main設文字置中？
那我不就得一個個把p, pre, li, 全部改回`text-align: left;`?
後來找到一個一樣可以自適應元素內容的，`display: table; `.
這又是三小？為什麼table自己有一個display屬性？
雖然我看不懂，但的確有用。
figure {
display: table;
margin: auto;
}
figcaption {
text-align: center;
}
※ 編輯: hijkxyzuw (140.116.102.31), 12/12/2015 16:56:46
1F：→ knuckles: 後面加個clear:both的div可撐開含float的div 12/12 18:10
3F：→ hijkxyzuw: 關鍵字：「那些年，我們一起清的浮動」。 12/12 18:22