真的不可能让div的大小适合其内容吗？

问题描述 投票：0回答：6

我想澄清一下是否可以根据内容的大小使 div 适合其大小，而不必使元素浮动或使其位置绝对。可以吗？

html size width
6个回答
158
投票

CSS
display
设置

这当然是可能的 - JSFiddle 概念证明 你可以在其中 可以看到所有三种可能的解决方案：

  • display: inline-block

     -
    这是你不知道的

  • position: absolute

    

  • float: left/right
    

    • 
    



    

    
    
    

    

        

            

                

                    
26
投票

                    
                

            

        

        
您可以使用
display: inline-block
。
    



    

    
    
    

    

        

            

                

                    
16
投票

                    
                

            

        

        
您可以使用：



width: -webkit-fit-content;
height: -webkit-fit-content;
width: -moz-fit-content;
height: -moz-fit-content;



编辑： 否，参见 http://red-team-design.com/horizontal-centering-using-css-fit-content-value/


还有：
http://dev.w3.org/csswg/css-box-3/
    



    

    
    
    

    

        

            

                

                    
5
投票

                    
                

            

        

        
它在 Edge 和 Chrome 上运行良好：


  width: fit-content;
  height: fit-content;

    



    

    
    
    

    

        

            

                

                    
4
投票

                    
                

            

        

        
你也可以使用




  
断字：打破所有；





当似乎没有任何效果时，这总是有效；）

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


在引导程序中：



我来到这里是因为同样的
问题，但是使用 Bootstrap，答案显示 display: inline-block
 但不是特定的 Bootstrap 类。多亏了这个，我自己找到了这个班级。但问题已经结束了，所以我将答案留在这里。


 d-inline-block





<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body data-bs-theme="dark">
  <!--mt-4 is for the top margin-->
  <div class="container mt-4">
    <div class="alert alert-danger">
      Normal Alert Message
    </div>

    <div class="alert alert-danger d-inline-block">
      Fit Alert Message
    </div>
  </div>
</body>






文档：https://getbootstrap.com/docs/5.3/utilities/display/#notation
    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.