如果我的HTML看起来像这样:
<div class="figure">
<img src="some_image.png" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>
有没有办法使用CSS,以便div
类figure
的宽度只有大到足以包含图像和标题?我想在两者周围放一个矩形边框,但我不想猜测div的宽度(以像素为单位)。
下面的示例(div.figure
的宽度似乎会扩展以填充其可用宽度)
div.figure {
border: 1px solid black;
}
<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>
答案 0 :(得分:5)
<强> SOLUTION:强>
<div>
是块级元素(与HTML5图形标记相同)。因此,您需要指定一个内联块行为,将css属性display: inline-block;
添加到您的图中。
CODE SNIPPET
figure {
border: 1px inset tomato;
display: inline-block;
}
<figure>
<img src="http://placehold.it/300x300" alt="my-photo"/>
<figcaption>
Fig. 1: Some caption
</figcaption>
</figure>
进一步阅读:
Chen Hui Jing的How well do you know CSS display? - 2016年6月18日
Sara Cope的Display - 2015年3月16日
答案 1 :(得分:2)
由于默认情况下div
是块元素,因此您需要做的就是将display: inline-block;
添加到div.figure
。像这样:
div.figure {
border: 1px solid black;
display: inline-block;
}
<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>
答案 2 :(得分:1)
.figure {
border: 1px solid #000;
width: auto;
display: inline-block;
}
它非常自我解释,Width自动说明..它是自动的。内联块正在进行工作。它告诉它只是它的孩子的宽度。所以更多可以与它“内联”。
答案 3 :(得分:0)
另一种简单的方法是简单地添加float: left
,它将div旁边的div浮动。 float
也使得div只与其内容一样宽(除非另有说明)。