让div宽度自适应教学


本文摘自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如何设置div的宽度

怎样让div自适应高度

在web里如何设置iframe自适应

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

怎样让textarea文本域宽度和高度width及height自动适应

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

怎样实现手机自适应网页的大小

css怎么设置文本框宽度

让div宽度自适应教学

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

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




打赏

取消

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

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

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

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

评论

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