分区宽度根据内容调整

默认div的宽度占一行，因为div是块级元素，这是块级元素的属性。

当需要根据内容调整div内容的宽度时，我整理了几种解决方案。

内联块

第一个解决方案是将元素设置为内联块元素，这样就不会填满整行。

<!--前端教程网-->
<style type="text/css"> 
.container{
  width:500px;
  height:300px;
  margin:0px auto;
}
.item{
  display: inline-block;
  background:red;
}
</style>
<div class="container">
 <div class="item">内容自适应</div>
</div>

漂浮

另一种解决方案是将元素设置为浮动元素，这样的话浮动元素也失去了保留一行的能力。

<!--前端教程网-->
<style type="text/css"> 
.container{
  width:500px;
  height:300px;
  margin:0px auto;
}
.item{
  float: left;
  background:red;
}
</style>
<div class="container">
 <div class="item">内容自适应</div>
</div>

绝对定位

我们还可以使用绝对定位，这样元素就失去了占一行的特性。需要注意的是，我们还需要设置元素的位置和父元素的相对位置。

<!--前端教程网-->
<style type="text/css"> 
.container{
  width:500px;
  height:300px;
  margin:0px auto;
  position: relative;
}
.item{
  position: absolute;
  left: 0; 
  top: 0;
  background:red;
}
</style>
<div class="container">
 <div class="item">内容自适应</div>
</div>

总结

以上我为大家整理了三种方法。实际项目中，也可以使用flex布局。在这里你还可以看到CSS的威力。可以有多种方法来实现一种效果。你可以总结很多，毕竟遵循自己的习惯最好。