css 实现div宽度随内容自适应

时间:2015-12-27
在css中，div属于块级元素，在不对div设置任何样式时，div独占一行。当内容没有占满一行时，div宽度仍然是一行的宽度，而并非内容宽度。本文向大家介绍div宽度如何随内容自适应。需要的码农可以参考一下。

我们可以使用CSS float来设置div宽度随内容自适应，即可让div默认100%自适应宽度变成宽从零开始自适应宽度效果，像span初始宽度一样随内容增加而增宽。

请看下面实例：

<!DOCTYPE html> 
<html> 
<head> 
<title>css 实现div宽度随内容自适应</title> 
<style> 
.case{ float:left;margin-right:30px;} 
</style> 
</head> 
<body> 
<div>未设置float内容一</div> 
<div>未设置float内容二</div> 
<div class="case">加float样式的内容三</div> 
<div class="case">对其加float样式的内容四</div> 
</body> 
</html>

在线运行

注意：通过css对div设置float去掉了div默认全屏宽度样式，但一般要使用这样的从零开始自适应内容宽度的盒子，又不能使用float浮动样式时，通过我们使用span标签即可实现

随机文章
WEB前端知识点必读
最近更新