如何使div不大于其内容？

这已在评论中提及,很难在其中一个答案中找到:

如果您display: flex出于任何原因使用,您可以使用:

div {
    display: inline-flex;
}

这也得到了浏览器的广泛支持.

您只需使用display: inline;(或white-space: nowrap;)即可.

希望这个对你有帮助.

    

        

            

                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            
        
    

我知道人们有时候不喜欢桌子,但是我得告诉你,我尝试过css inline hacks,他们有点在一些div中工作但是在其他人没有,所以,真的只是更容易将扩展div放入一个表......并且......它可以具有或不具有内联属性,并且表仍然是将保持内容总宽度的表.=)

您可以使用inline-block@ user473598,但要注意旧版浏览器..

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla根本不支持内联块,但是它们-moz-inline-stack大致相同

一些跨浏览器的inline-block显示属性:https: //css-tricks.com/snippets/css/cross-browser-inline-block/

您可以在以下网址中查看使用此属性的一些测试:https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

这是一个工作演示 -

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

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

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

The Way is using inline-block

Supporting elements are also added in CSS.


   
Floating box
   
Floating box
   
Floating box
   
Floating box
   
Floating box
   
Floating box
   
Floating box
   
Floating box

div { 
    width: fit-content; 
}

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this

	

        

            
OS
            
Version
 
        
        

            
OpenBSD
            
5.7
 
        
        

            
Windows
            
Please upgrade to 10!
 
        
    

what you are looking for?


Or may be...

    

    	

            

                
OS
                
Version
 
            
            

                
OpenBSD
                
5.7
 
            
            

                
Windows
                
Please upgrade to 10!
 
            
        
    

this is what you are looking for.

    // HTML elements

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}

  

    

      
Column1
      
Column2
      
Column3
    
  

width: -moz-fit-content;

display: table;

display: inline-block; 

div{
  width:auto;
  height:auto;
}

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

fix