Home  >  Article  >  Web Front-end  >  css 实现div宽度随内容自适应

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

WBOY
WBOYOriginal
2016-06-01 09:53:243503browse

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

请看下面实例:

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

在线运行

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn