[css]css布局两边固定中间自适应的四种方法

楼主^#

更多发布于：2019-02-17 22:14

第一种：左右侧采用浮动中间采用margin-left 和 margin-right 方法。
   左栏左浮动，右栏右浮动，中间栏放最后。
代码实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<style type="text/css">
   *{
   margin: 0;
   padding: 0;
   }
   .center {
   margin:0 200px;
   background:red;
   }
   .left{
   float:left;
   width:200px;
   background:blue;
   height:100%;
   }
   .right{
   float:right;
   width:200px;
   background:green;
   height:100%;
   }
   </style>
</head><body><div class="left">左边栏</div>
<div class="right">右边栏</div>
<div class="center">中间栏</div>
</body>
</html>
效果图：

描述：效果图

图片：1.png

：

注意：此方法的优点是：代码足够简洁与高效；缺点是：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。
在使用此方式时，中间栏一定要放最后。
第二种：左右两侧采用绝对定位中间同样采用margin-left margin-right方法
   左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<style type="text/css">
   *{
   margin: 0;
   padding: 0;
   }
   .center {
   margin:0 200px;
   background:red;
   height: 100px;
   }
   .left{
   position:absolute;
   top:0;
   left:0;
   width:200px;
   background:blue;
   height: 100px;
   }
   .right{
   position:absolute;
   top:0;
   right:0;
   width:200px;
   background:green;
   height: 100px;
   }
   </style>
</head>
<body>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
<div class="center">中间栏</div>
</body>
</html>
第三种：负的margin（margin的负值法）。
左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。
代码实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<style type="text/css">
   *{
   margin: 0;
   padding: 0;
   }
   .all {
   float:left;
   width:100%;
   }
   .center {
   margin:0 200px;
   height:100%;
   background:yellow;
   }
   .left{
   float:left;
   width:200px;
   margin-left:-100%;
   background:blue;
   }
   .right{
   float:left;
   width:200px;
   margin-left:-200px;
   background:blueviolet;
   }
   </style>
</head><body>
<div class="all"><div class="center">中间栏</div>
</div><div class="left">左边栏</div><div class="right">右边栏</div>
</body>
</html>第四种：也是利用负的margin,待定考虑，不经常遇到，有兴趣的可以百度扩展哦。
第五种：display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。
另外：有一种三列布局中间固定宽度，两边自适应宽度。对于我来说，这是一种很少碰到的布局方法。

欢迎吐槽！！！！

喜欢1

[css]css布局两边固定中间自适应的四种方法

最新喜欢：