三栏布局中间自适应总结

superPershing 发布于2019-08-01 16:27 / 3187人阅读

摘要：三栏布局，中间自适应这个经典的问题，之前也看了很多。需要对中间或者两边的属性进行微调，否则中间与两边高度不齐，效果如下所示方式三浮动负值法又被称为双飞翼布局法中间左边右边注意点要放在最前面，这样和才能覆盖上去。

三栏布局，中间自适应这个经典的问题，之前也看了很多。今天准备在自己的博客里面总结一下，加深自己的理解。

方式一：左边左浮动，右边右浮动，中间自适应

注意点：
1.

一定要放在最后*，因为如果middle放在第一个，会占据文档流位置，left和right的浮动只能从第二行开始了。
2.当浏览器窗口很小的时候，最右边元素会被压迫到下一行。

下面附上效果图：

方式二：绝对定位法

注意点：
1.因为是绝对定位，所以middle、left和right的位置先后顺序可以随便放。
2.需要对中间或者两边的top属性进行微调，否则中间与两边高度不齐，效果如下所示

方式三：浮动+margin负值法（又被称为双飞翼布局法）



中间

左边
右边

注意点：
1.middke要放在最前面，这样left和right才能覆盖上去。
2.left的margin-left设置成-100%，浮动到第一行最左侧，right的margin-left设置成负的自身宽度，正好浮动到第一行最右侧。
3.

的border宽度会影响left盒子和right盒子向第一行浮动的位置，因为会把border的宽度算进去，比如本例子中，如果border没有被注释掉，right盒子的margin-left设置成-300是无法浮动到第一行的，要-304才能浮动到第一行，加上了border的宽度。
4.在middle里面嵌套一个main盒子，是为了通过main盒子设置margin-left和margin-right。如果直接在浮动的middle上设置，是会有问题的，整体会向右偏移margin-left距离。

效果图如下：

方法四：css3 弹性盒子flex

注意点：
1.代码十分简洁，只要在最外层加一个大盒子包裹，并设置display等于flex就可以了，间距可以用margin进行调整。
2.middle盒子一定要放在中间，按顺序来。
3.当浏览器窗口缩到很小时，也不会把最右边的right盒子挤到下一行。

效果图如下：

总结：这就是常用的几种布局方式，还有一种圣杯布局法原理跟双飞翼相似，但是更复杂一些，相比而言还是推荐双飞翼布局法。弹性盒子的布局法应该是最简洁实用的，优点比较突出。

GPU云服务器云服务器三栏布局 html5 三栏布局自适应文本自适应

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

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

三栏布局中间自适应总结

摘要：三栏布局，中间自适应这个经典的问题，之前也看了很多。需要对中间或者两边的属性进行微调，否则中间与两边高度不齐，效果如下所示方式三浮动负值法又被称为双飞翼布局法中间左边右边注意点要放在最前面，这样和才能覆盖上去。三栏布局，中间自适应这个经典的问题，之前也看了很多。今天准备在自己的博客里面总结一下，加深自己的理解。方式一：左边左浮动，右边右浮动，中间自适应 .left{ ...

李义 2019-08-30 15:53 评论0 收藏0
CSS || 三栏布局，两边固定，中间自适应

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

pcChao 2019-08-29 12:12 评论0 收藏0
三栏布局（一）-------左右宽高固定，中间自适应

摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定，中间自适应； 2、上下高度固定，中间自适应； 3、左宽度固定，右自适应； 4、上高度固定，下自适应，下边是我看过网上的视频后写出来的三栏布局-左右宽...

Aldous 2019-04-23 13:08 评论0 收藏0
三栏布局（二）-------上下宽高固定，中间自适应

摘要：上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有种布局方式话不多说，直接上代码。上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有4种布局方式： position; flex; table; grid; 话不多说，直接上代码。 DOCTYPE html> ...

Render 2019-04-23 13:08 评论0 收藏0
假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...

alaege 2019-08-30 14:04 评论0 收藏0