左中右三栏布局

最新推荐文章于 2024-05-18 16:11:19 发布

亿光年距离

最新推荐文章于 2024-05-18 16:11:19 发布

阅读量446

点赞数 1

分类专栏：日常总结文章标签： html

本文链接：https://blog.csdn.net/zhujiecan/article/details/90714264

版权

本文介绍了如何使用HTML配合定位、浮动和弹性模型三种方法实现左中右三栏布局，尤其关注中间栏的自适应特性。

摘要由CSDN通过智能技术生成

左中右三栏布局，中间自适应

下面将介绍三种方法实现这种布局

第一种当然是定位了

父级相对定位（relative），左右子元素绝对定位（absolute）
中间盒子要设置左右margin值，值为左右盒子宽度，设置padding也行
为什么呢？因为绝对定位元素脱离了普通文档流了（就像飘在上面一样）

    <head>        
         <style> 
            .container{
    
                 position: relative; 
                 min-width: 600px; 
                 padding: 100px; 
                 box-sizing: border-box;
                 background-color:rgba(0,0,0, .4); 
            }
            .box-left{
     
                 position: absolute;
                 top: 100px;
                 left: 100px; 
                 width: 100px;
                 height: 100px; 
                 background-color: rgba(145, 5, 145, .4);
             }
             .box-right{
     
                 position: absolute; 
                 top: 100px; 
                 right: 100px; 
                 width: 100px;
                 height: 100px;
                 background-color: rgba(56, 56, 245, .4);
             } 
             .box-center{
    
                 height<

最低0.47元/天解锁文章

亿光年距离

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
左中右三栏布局

左中右三栏布局，中间自适应下面将介绍三种方法实现这种布局第一种当然是定位了父级相对定位（relative），左右子元素绝对定位（absolute）中间盒子要设置左右margin值，值为左右盒子宽度，设置padding也行为什么呢？因为绝对定位元素脱离了普通文档流了（就像飘在上面一样） <head> <style> ...
复制链接

扫一扫