首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:13:21 417

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

如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

工具/原料

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

方法/步骤

  • 1

    第一步:思路整理。PlB办公区 - 实用经验教程分享!

    1、HTML的div标签主要是用来布局PlB办公区 - 实用经验教程分享!

    2、div默认是没有任何属性的这也是常用它布局的原因PlB办公区 - 实用经验教程分享!

    3、布局之前茄丽先要了解HTML的盒子如下图所示PlB办公区 - 实用经验教程分享!

    4、div默认是没有长和宽的需要设置,其自动会根据自己内容扩展自己的宽度和高度。PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

  • 2

    第二步:代码编写。PlB办公区 - 实用经验教程分享!

    1、主要设置两个div,一个div在外一个div在内,并设置div的边框颜色PlB办公区 - 实用经验教程分享!

    2、具体代码如下所示PlB办公区 - 实用经验教程分享!

    !DOCTYPE html>PlB办公区 - 实用经验教程分享!

    html>PlB办公区 - 实用经验教程分享!

    head>PlB办公区 - 实用经验教程分享!

    meta charset="UTF-8">PlB办公区 - 实用经验教程分享!

    title>div改变/title>PlB办公区 - 实用经验教程分享!

    style>PlB办公区 - 实用经验教程分享!

    #a {PlB办公区 - 实用经验教程分享!

    border: 1px solid red;PlB办公区 - 实用经验教程分享!

    display: inline-block;PlB办公区 - 实用经验教程分享!

    }PlB办公区 - 实用经验教程分享!

    PlB办公区 - 实用经验教程分享!

    #b {PlB办公区 - 实用经验教程分享!

    border: 1px solid green;PlB办公区 - 实用经验教程分享!

    margin: 2px 2px 2px 2px;PlB办公区 - 实用经验教程分享!

    height: 50px;PlB办公区 - 实用经验教程分享!

    width: 500px;PlB办公区 - 实用经验教程分享!

    }PlB办公区 - 实用经验教程分享!

    /style>PlB办公区 - 实用经验教程分享!

    /head>PlB办公区 - 实用经验教程分享!

    body>PlB办公区 - 实用经验教程分享!

    PlB办公区 - 实用经验教程分享!

    div id="a">PlB办公区 - 实用经验教程分享!

    div id="b">/div>PlB办公区 - 实用经验教程分享!

    慎诉div id="c">PlB办公区 - 实用经验教程分享!

    ul>/ul>PlB办公区 - 实用经验教程分享!

    /div>PlB办公区 - 实用经验教程分享!

    /div>PlB办公区 - 实用经验教程分享!

    /body>PlB办公区 - 实用经验教程分享!

    /html>PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

  • 3

    第三步:测试代码。PlB办公区 - 实用经验教程分享!

    1、首先打开页面,具体如下图所示PlB办公区 - 实用经验教程分享!

    2、F12打开审查元素,修改内层div的宽度,外层div随着边框PlB办公区 - 实用经验教程分享!

    3、修改内层div高度,外层div高度随之改变捕三伟。PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

  • 3本页面未经许可获取自百度经验
  • 4

    第四步:div定位测试。PlB办公区 - 实用经验教程分享!

    1、div如果使用了定位position则外层不会随内层div变化。PlB办公区 - 实用经验教程分享!

    2、具体操作如下所示。PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

    如何让内层div随外层div的宽度自适应调整宽度PlB办公区 - 实用经验教程分享!

  • 注意事项

    • 注意设置边框或者背景颜色,便于区分实际效果。
    • 需要注意position: absolute绝对定位的使用。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!PlB办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码