使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

最新推荐文章于 2023-04-28 00:11:18 发布

最骚的就是你

最新推荐文章于 2023-04-28 00:11:18 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/libin_1/article/details/78324425

版权

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。

1. 基于传统的position和margin等属性进行布局

这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。

1).绝对定位法

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

代码如下：

文档代码：

[html]view plaincopy 
    
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>layout_box</title>  
         <link rel="stylesheet" type="text/css" href="../css/layout_box.css">  
     </head>  
     <body>  
         <h3>实现三列宽度自适应布局</h3>  
         <div id = "left">我是左边</div>  
         <div id = "right">我是右边</div>  
         <div 

最低0.47元/天解锁文章

最骚的就是你

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。 1).绝对定位法绝对定位法原
复制链接

扫一扫