首页 > 软件开发 > CSS >

div+css之三列布局

来源:互联网 2023-03-16 19:17:42 522

div css之三列布局NRe办公区 - 实用经验教程分享!

方法/步骤

  • 1

    1.最终效果:NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 2

    2.添加如下代码:NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 3

    3.预览效果:NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 4

    4.给左右两个div添加浮动NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 5

    5.预览效果:NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 6

    6.发现,怎么右侧的没有在一行上呢?而且center和right之间还有空隙,显然不是放不下的原因NRe办公区 - 实用经验教程分享!

    那么我们从文档流的原理来分析下NRe办公区 - 实用经验教程分享!

    首先left 想左浮动,没有问题,而center没有浮动,但是left已经脱离了文档流,所以center就紧跟着left顶了上去,而center本身就是个块级元素,占满整个一行,那么后边无论是块级元素还是行内元素,都会另起其一行,无论你是左浮动还是有浮动,把right的右浮动去掉之后NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 7

    7.发现,果然如此。NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 7相关内容未经授权抓取自百度经验
  • 8

    8.那么该怎么解决呢?NRe办公区 - 实用经验教程分享!

    很简单,在html中把center放到最后NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 9

    9.预览效果:NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

  • 10

    10.把center的宽度去掉之后,最终效果如下:NRe办公区 - 实用经验教程分享!

    div css之三列布局NRe办公区 - 实用经验教程分享!

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


    标签: CSS

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