如何让内层div随外层div的宽度自适应调整宽度

2025-10-27 21:38:30

1、第一步：思路整理。

1、HTML的div标签主要是用来布局

2、div默认是没有任何属性的这也是常用它布局的原因

3、布局之前先要了解HTML的盒子如下图所示

4、div默认是没有长和宽的需要设置，其自动会根据自己内容扩展自己的宽度和高度。

如何让内层div随外层div的宽度自适应调整宽度

2、第二步：代码编写。

1、主要设置两个div，一个div在外一个div在内，并设置div的边框颜色

2、具体代码如下所示

<!DOCTYPE html>

<html>

<head>

<title>div改变</title>

<style>

#a {

border: 1px solid red;

display: inline-block;

}

#b {

border: 1px solid green;

margin: 2px 2px 2px 2px;

height: 50px;

width: 500px;

}

</style>

</head>

<body>

</div>

</body>

</html>

如何让内层div随外层div的宽度自适应调整宽度

3、第三步：测试代码。

1、首先打开页面，具体如下图所示

2、F12打开审查元素，修改内层div的宽度，外层div随着边框

3、修改内层div高度，外层div高度随之改变。

如何让内层div随外层div的宽度自适应调整宽度

4、第四步：div定位测试。

1、div如果使用了定位position则外层不会随内层div变化。

2、具体操作如下所示。

如何让内层div随外层div的宽度自适应调整宽度

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。