使一个div“拥抱”其中包含的组件

39 浏览
0 Comments

使一个div“拥抱”其中包含的组件

这个问题已有答案：

如何使一个 div 不比其内容更宽？

如何根据图像调整 div 和段落的大小？

如果我的 HTML 看起来像这样：

  
  Fig. 1: Some caption

是否有一种方法可以使用 CSS，使类为 figure 的 div 的宽度只大到足以包含图像和标题？我想给它们都加上一个矩形边框，但我不想猜测 div 的像素宽度。

下面是一个示例（div.figure 的宽度似乎会扩展以填充其可用的宽度）

div.figure { 
  border: 1px solid black; 
}


Fig. 1: Some caption

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

由于 div 默认是块级元素，你只需要为 div.figure 添加 display: inline-block;即可。像这样：

div.figure { 
  border: 1px solid black;
  display: inline-block;
}



Fig. 1: Some caption

0
0 Comments

解决方案：

是一个块级元素（同HTML5中的

标记）。因此，您需要指定您想要内联块行为，将CSS属性display: inline-block;添加到

中。

代码片段：

figure {
  border: 1px inset tomato;
  display: inline-block;
}



  my-photo
  

    Fig. 1: Some caption

进一步阅读：

你对CSS显示有多熟悉？ 作者：Chen Hui Jing - 2016年6月18日

显示效果 作者：Sara Cope - 2015年3月16日

0