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

看板Web_Design作者hijkxyzuw (i,j,k) ×(x,y,z)時間9年前 (2015/12/12 15:05)推噓0(0推 0噓 3→)

留言3則, 2人參與討論串1/1

就是想作出和內容一樣大的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