1. 犀牛前端部落首页
  2. CSS教程

div宽度根据内容自适应

div宽度根据内容自适应

默认div的宽度会占满一行,因为div是块级元素,这是块级元素的特性。

当需要将一个div内容宽度根据内容自适应,俺总结了几种解决办法。

inline-block

第一种解决办法,是将元素设置位行内块元素,这样就不会占满一行。

<!--犀牛前端部落-->
<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的强大,一种效果可能有多种实现方式,大家可以多多总结,毕竟,按照自己习惯才是最好的。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4253.html

发表评论

登录后才能评论