作者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/cn.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