Page 204 - css揭秘

36 自适应内部元素

难题

众所周知，如果不给元素指定一个具体的 height，它就会自动适应其
内容的高度。假如我们希望 width 也具有类似的行为，该怎么做呢？举个例
子，假设我们用 HTML5 来标记图片元素，结构代码可能是这样的：

<p>Some text [...]</p> HTML
<figure>
<img src="adamcatlace.jpg" />
<figcaption>
The great Sir Adam Catlace was named after
Countess Ada Lovelace, the first programmer.
</figcaption>
</figure>
<p>More text [...].</p>

假设还需要给它添加一些基本的样式，比如一道边框。在默认情况下，
它看起来如图 7-1 所示。但我们实际上希望这个 figure 元素能跟它所包含
的图片一样宽（图片的尺寸往往不是固定的），而且是水平居中的。目前这
个渲染结果距离我们的期望还有不小的差距：文本行比图片要宽多了。如何
1①
让 figure 的宽度由它内部的图片来决定，而不是由它的父元素来决定呢 ？
闯荡江湖这么多年，相信你已经积攒了一套顺手的 CSS 代码大全。在这个
代码库里，你可能会找到几段可以满足这种宽度行为的代码，它们通常是以 图 7-1
副作用的方式来实现的。 在用 CSS 加上了边框和内边距之
后，这段结构代码在默认情况下
„ 让 <figure> 元素浮动会让它得到正确的宽度，但同时也彻底改变了 的渲染效果
它的布局模式，这往往会导致我们不想要的结果（参见图 7-2）。
„ 对 figure 应用 display: inline-block 会让它根据内容来决定自身的
尺寸，但跟我们想要的方式还是不一样（参见图 7-3）。此外，即使它的
宽度计算方式与我们的期望一致，我们也很难继续完成水平居中的任务。
我们需要对它的父元素应用 text-align: center，然后对这个父元素的
所有子元素（p, ul, ol, dl, ...）都设置一遍 text-align: left。
图 7-2
„ 当开发者走投无路时，就只能对 figure 应用一个固定的 width 或
尝试用浮动来解决宽度问题，却
max-width 了，然后对 figure > img 应用 max-width: 100%。可
引发了新的问题
是这个方法无法充分利用有效空间；对于过小的图片来说，布局效
果也很突兀。此外，响应式也无从谈起。

① 用 CSS 规范的术语来说，我们希望它的宽度由内部因素来决定，而不是由外部因素来决定。

36 自适应内部元素 173

඀ࠡ JOEC