首页 > 软件开发 > HTML >

html css怎样让一个div在左边 一个在右

来源:互联网 2023-03-16 19:17:44 248

网页布局很多时候都会需要一个div靠左而另一个靠右。今天小编我就来分享一下HTML css让一个div靠左,一个靠右的经验给大家。CpG办公区 - 实用经验教程分享!

工具/原料

  • Hbuilder x
  • 电脑
  • 谷歌浏览器

方法/步骤

  • 1

    首先来设定一个布局:一个div包裹两个div。

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

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

    html css怎样让一个div在左边 一个在右CpG办公区 - 实用经验教程分享!

  • 2

    但是这样做只会得到垂直排列的结果,而我们需要的是一个靠左,一个靠右CpG办公区 - 实用经验教程分享!

    html css怎样让一个div在左边 一个在右CpG办公区 - 实用经验教程分享!

  • 3

    所以我们可以分别给子元素添加浮动float。CpG办公区 - 实用经验教程分享!

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

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

    float: left表示靠左浮动。CpG办公区 - 实用经验教程分享!

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

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

    float: right表示靠右浮动。CpG办公区 - 实用经验教程分享!

    html css怎样让一个div在左边 一个在右CpG办公区 - 实用经验教程分享!

  • 4

    这样就可以让div一个靠左一个靠右了。CpG办公区 - 实用经验教程分享!

    html css怎样让一个div在左边 一个在右CpG办公区 - 实用经验教程分享!

  • 5

    当然,不设置子元素,而直接设置父元素的display: flex;CpG办公区 - 实用经验教程分享!

    flex: justify-content: space-between; 也是可以达到一个左,一个右的效果。CpG办公区 - 实用经验教程分享!

    html css怎样让一个div在左边 一个在右CpG办公区 - 实用经验教程分享!

  • 5相关内容未经许可获取自百度经验
  • 注意事项

    • 有用可以分享
    • 不足之处请指教

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


    标签: HTMLCSS

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