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

  • 原创
  • |
  • 浏览:10864
  • |
  • 更新:
  • |
  • 标签:HTML 

      DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

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

工具/原料

  • 电脑
  • 前端页面编辑工具

方法/步骤

  1. 1

    第一步:思路整理。

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

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

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

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

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

    第二步:代码编写。

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

    2、具体代码如下所示

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <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 id="a">

       <div id="b"></div>

       <div id="c">

           <ul></ul>

       </div>

    </div>

    </body>

    </html>

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

    第三步:测试代码。

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

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

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

    如何让内层div随外层div的宽度自适应调整宽度
    如何让内层div随外层div的宽度自适应调整宽度
    如何让内层div随外层div的宽度自适应调整宽度
    如何让内层div随外层div的宽度自适应调整宽度
  4. 3
    本页面未经许可获取自百度经验
  5. 4

    第四步:div定位测试。

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

    2、具体操作如下所示。

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

注意事项

  • 注意设置边框或者背景颜色,便于区分实际效果。
  • 需要注意position: absolute绝对定位的使用。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部
相关标签HTML