如何使用 CSS 使 div 不大于其内容?
有三种方法可以解决这个问题:
- 默认情况下
- 使用 inline-block 属性
- 在宽度和高度中使用 fit-content 属性
默认情况:
在 HTML 中,div 默认适合其中的内容。这个例子是这样的:
示例 1:
Geeks for Geeks Example
Geeks For Geeks
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
输出:
显示了两种不同屏幕宽度的输出,证明它与其中的内容相匹配。
屏幕一:
屏幕 2:
使用 inline-block 属性:
使用 display:inline-block 属性根据其内容设置 div 大小。
示例 2:
Geeks for Geeks Example
Geeks For Geeks
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
输出:
显示了两种不同屏幕宽度的输出,证明它与其中的内容相匹配。
屏幕一:
屏幕 2:
在宽度和高度中使用 fit-content 属性:
在这个方法中,我们将 width 和 height 属性设置为 fit-content 值。
示例 3:
Geeks for Geeks Example
Geeks For Geeks
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
输出:
显示了两种不同屏幕宽度的输出,证明它与其中的内容相匹配。
屏幕一:
屏幕 2: