首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:17:44 版权归原作者所有,如有侵权,请联系我们

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

工具/原料

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

方法/步骤

  • 1

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

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

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

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

  • 2

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

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

  • 3

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

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

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

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

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

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

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

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

  • 4

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

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

  • 5

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

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

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

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

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

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


    标签: HTMLCSS

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