首页 > 软件开发 > HTML >

怎么让DIV在另一个DIV里靠底部显示

来源:互联网 2023-03-16 19:16:34 143

HTML里面有个重要的常用表情就是DIV,我们经常会用DIV嵌套DIV,但是会经常遇到无法靠底部的BUG,虽然不是BUG,但是这里需要用CSS进行处理,而且处理的方法不止一种,现在就教大家。YZc办公区 - 实用经验教程分享!

怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text 3
  • chrome浏览器

方法/步骤

  • 1

    打开sublime text 3,新建一个HTML文档,并且编写基本的框架。YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

  • 1相关内容未经授权抓取自百度经验
  • 2

    新建一个CSS文档,并且与HTML文档进行关联。YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

  • 3

    这里先把DIV嵌套写出来,并且赋给class。YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

  • 4

    现在给两个DIV设置样式,可以看到DIV会自动在上方显示。YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

  • 5

    我们可以让父DIV设置relative,子DIV设置absolute来让它到底部显示。YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

  • 6

    当然也可以直接让子DIV用relative进行位置的偏移,效果是一样的。YZc办公区 - 实用经验教程分享!

    怎么让DIV在另一个DIV里靠底部显示YZc办公区 - 实用经验教程分享!

  • 注意事项

    • tips: 注意absolute和relative的两者区别。

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


    标签: HTMLCSS

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