html - 制作一个 div "hug"它包含的组件

<分区>

如果我有如下所示的 HTML:

<div class="figure">
  <img src="some_image.png" />
  <div><span class="caption">Fig. 1: Some caption</span></div>
</div>

有没有一种方法可以使用 CSS，使 figure 类的 div 的宽度仅大到足以包含图像和标题？我想在两者周围放置一个矩形边框，但我不想猜测 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>

最佳答案

解决方案:

A <div>是 block 级元素(与 HTML5 图形标签相同)。所以你需要指定你想要一个内联 block 行为添加 css 属性 display: inline-block;到你的身材。

代码片段:

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>

进一步阅读:

How well do you know CSS display?通过 Chen Hui Jing - 2016 年 6 月 18 日

Display通过 Sara Cope - 2015 年 3 月 16 日

关于html - 制作一个 div "hug"它包含的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38087786/

上一篇：javascript - 为 HTML5 选择添加搜索功能

下一篇：html - 仅使用 css 在悬停时隐藏同级 div

相关文章：

javascript - 如何从网页大小控制网页元素大小

html - 页脚上方的 Div 影响页脚样式，如何解决？

html - 将多种格式的文本对齐到行上

javascript - 在同一个 javascript 函数中创建多个跨度

php - 如何从 HTML 表和数据库中删除查询？

javascript - 无法使用 jQuery 删除每个文章 div 的描述中的部分文本

javascript - 图像在浏览器中不会移位

css - 如何在不移动任何东西的情况下在输入下添加跨度？

html - 放置 anchor 标记以覆盖元素的语义正确方法

css - 如何使用 CSS 将填充应用于包装文本？