首页 > 软件开发 > CSS >

怎么让两个div在同一行

来源:互联网 2023-03-16 19:06:44 538

使用display属性和float属性将两个div显示在同一行FSH办公区 - 实用经验教程分享!

工具/原料

  • CSS
  • HTML
  • Hibuilder

方法/步骤

  • 1

    CSS中,div属于块级元素,默认独占一行,一行内添加一个div,之后再加一个div,第二的div将另起一行。所以默认情况下,两个div不能在同一行显示。FSH办公区 - 实用经验教程分享!

    如下图所示,两个div换行显示FSH办公区 - 实用经验教程分享!

    怎么让两个div在同一行FSH办公区 - 实用经验教程分享!

  • 2

    解决方法一:在需要同行显示的div中添加display:inline属性FSH办公区 - 实用经验教程分享!

    具体如图,左边为代码,右边为效果图FSH办公区 - 实用经验教程分享!

    怎么让两个div在同一行FSH办公区 - 实用经验教程分享!

  • 3

    解决方法二:使用float属性,float:left。也可以为float的其它属性值FSH办公区 - 实用经验教程分享!

    具体操作图FSH办公区 - 实用经验教程分享!

    怎么让两个div在同一行FSH办公区 - 实用经验教程分享!

  • 3相关内容未经授权抓取自百度经验
  • 注意事项

    • 使用float属性使div同行显示时会影响后续的div,所以用完之后要清除浮动,使用clear:both

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


    标签: CSS

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