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

CoyPan 发布于2019-08-29 17:00 / 3337人阅读

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

解析四种常用方法以及原理：浮动、浮动内嵌 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，占据空间跟随父级放大，同时跟随变小，并且自动占满剩余空间

超融合服务器混合云 css自适应 css图片自适应 asp 自适应css 固定布局

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

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

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

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

pcChao 2019-08-29 12:12 评论0 收藏0
css 布局：两边固定中间自适应

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

Martin91 2019-08-02 11:44 评论0 收藏0
三列布局（左右固定，中间自适应）

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

aboutU 2019-08-29 17:23 评论0 收藏0
css常见的各种布局下----三列布局

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

番茄西红柿 2019-04-23 10:21 评论0 收藏0
css常见的各种布局下----三列布局

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

tigerZH 2019-04-22 17:02 评论0 收藏0