[討論] 如何作出『儘量小』的block

[hijkxyzuw (i,j,k) ×(x,y,z)]

就是想作出和內容一樣大的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://www.ptt.cc/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
→ knuckles: 後面加個clear:both的div可撐開含float的div
→ knuckles: http://jsfiddle.net/Knuckles/mr14s95v/ 參考一下
→ hijkxyzuw: 關鍵字：「那些年，我們一起清的浮動」。