资讯专栏INFORMATION COLUMN

css 布局:两边固定中间自适应

Martin91 / 2971人阅读

摘要:解析四种常用方法以及原理浮动浮动内嵌定位。浮动元素高度为,浮动盒子层级比块级水平盒子高,比水平盒子低。中间元素用,防止内容跑到左右两块定位元素下面被遮盖。我在左边我在中间,自动占据剩余空间我在右边原理布局,子元素默认水平排列。

解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。

浮动


我在左边

我在右边

我排最后,但是跑到中间来了

原理:

浮动元素和非浮动元素不在同一个立体空间,如果不清浮动,位置在它下面的元素将往上浮。

浮动元素高度为0,浮动盒子层级比 block 块级水平盒子高,比 inline/inline-block 水平盒子低。

浮动内嵌 div


我在中间

我在左边

我在右边

原理:

三个元素都浮动,其中主题元素沾满一行 100% ,利用负 margin 把左右两边的元素放好。

主题元素里面再套一个子元素,子元素 margin: 0 200px ,防止内容跑到左右两块浮动元素下面被遮盖。

定位


我在中间,我用 margin 抵消左右两块定位元素占据空间

我在左边,我是定位元素

我在右边,我是定位元素

原理:

左右两个元素定位,可放任意位置。

中间元素用 margin: 0 200px,防止内容跑到左右两块定位元素下面被遮盖。

flex


我在左边

我在中间,flex: 1 自动占据剩余空间

我在右边

原理:

flex 布局,子元素默认水平排列。

flex: 0 1 auto -> 默认,占据空间不跟随父级放大,跟随变小,自身本来宽度

flex: 1 1 auto -> auto,占据空间跟随父级放大,同时跟随变小,自身本来宽度

flex: 0 0 auto -> none,占据空间不跟随父级放大,同时也不跟随变小,自身本来宽度

flex: 1 1 1 -> auto,占据空间跟随父级放大,同时跟随变小,并且自动占满剩余空间

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53084.html

相关文章

  • CSS || 三栏布局两边固定中间适应

    摘要:实现基于纯实现的三栏布局需要将中间的内容放在结构的最后,否则右侧会沉在中间内容的下侧原理元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的值即可两边固定宽度,中间宽度自适应。 1 float实现 基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧 原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margi...

    pcChao 评论0 收藏0
  • css 布局两边固定中间适应

    摘要:解析四种常用方法以及原理浮动浮动内嵌定位。浮动元素高度为,浮动盒子层级比块级水平盒子高,比水平盒子低。中间元素用,防止内容跑到左右两块定位元素下面被遮盖。我在左边我在中间,自动占据剩余空间我在右边原理布局,子元素默认水平排列。 解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。 浮动 .wrap {background: #eee; padding: 20px...

    CoyPan 评论0 收藏0
  • 三列布局(左右固定中间适应

    1、定位 我是左边,我是固定的 我是中间,我是自适应的,左边右边都position固定了,他们脱离了文档流,我终于得到机会挤进中间啦!只要我margin一下就没人会挡住我啦!我可真是个小机灵鬼(同时,我还是个自由人,我div写在开头中间结尾都可以呢) 我是右边,我也是固定的 *{ margin:0; padding: 0; } .l...

    aboutU 评论0 收藏0
  • css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应   1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局      1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不够称不开整个宽度      1.1.2 左右固定部位,使用margin-left :负数,使其左右靠齐      1.1.3 中间自适应部分嵌套一个div,设置m...

    番茄西红柿 评论0 收藏0
  • css常见的各种布局下----三列布局

    摘要:三列布局,左右固定宽度右边自适应不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局自适应部分一定要放第一个位子,使用浮动,并且设置宽度为,不设置浮动元素内容不够称不开整个宽度左右固定部位,使用负数,使其左右靠齐中间自适应部分嵌套一css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使...

    tigerZH 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<