让div宽度自适应教学

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

我们都知道，在css布局时，在不对div设置任何样式时，div独占一行默认CSS样式为100%宽度，那么我们这次教大家怎么实现DIV宽度自适应但宽度从零随内容增加而宽度增加？而非一开始即宽度全屏100%宽的方法

解决方法：

使用CSS float即可让div默认100%自适应宽度变成宽从零开始自适应宽度效果。

css实现div宽度从零开始小案例

1、完整HTML+CSS代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>小实例</title>

<style>

.case{ float:left}

</style>

</head>

<body>

<div>未设置float内容一</div>

<div>未设置float内容二</div>

<div class="case">加float样式的内容三</div>

<div class="case">对其加float样式的内容四</div>

</body>

</html>

关键代码：对div加float浮动样式，让其宽度非100%开始，而是随内容多少而改变，想span初始宽度一样随内容增加而增宽。

阅读剩余部分

相关阅读 >>

css怎么设置span的宽度

在web里如何设置iframe自适应

css怎么设置滚动条宽度

css滚动条的宽度怎么设置

让div宽度自适应教学

怎样设置超链接的宽度和高度

设置div的宽度可以通过css的什么属性

表格单元格td设置宽度无效应该如何解决

怎样让div自适应高度

html5实现移动页面自适应手机屏幕的方法

更多相关阅读请进入《教学》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...