📜  如何使用 CSS 使 div 不大于其内容?

📅  最后修改于: 2022-05-13 01:56:52.009000             🧑  作者: Mango

如何使用 CSS 使 div 不大于其内容?

有三种方法可以解决这个问题:

  1. 默认情况下
  2. 使用 inline-block 属性
  3. 在宽度和高度中使用 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: