登录  /  注册

CSS三列布局之左右宽度固定,中间元素自适应问题_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:22:06
原创
998人浏览过

最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈。

首先我想到的是float——浮动布局

使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度</div>    <div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度</div>    <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容,自适应宽度</div></body></html>
登录后复制

其次我想到了position——定位

使用定位方式,不需要先渲染中间元素,只要把左右两个元素分别使用定位,left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>.left{     width:200px;     height:500px;     position: absolute;     top:0;     left:0;     background:blue;}.center{    margin-left: 200px;    margin-right: 300px;    height:500px;    background-color: green;}.right{width:300px;height:500px;position: absolute;;top:0;right:0;background: blue;}    </style></head><body>    <div class="left">左边</div>    <div class="center">中间</div>    <div class="right">右边</div></body></html>
登录后复制

第三、使用双飞翼布局

使用双飞翼布局与其他方式不同,它最先渲染的是中间元素,然后才渲染两边元素(注意,这一点与float布局方式正好相反哟),先将三个元素都设置为向左浮动,然后使用负边距将左右两个元素覆盖到中间元素的左右两边,形成羽翼。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>.middle{    float: left;    width: 100%;    height: 50px;    background-color: #fff9ca;}.middle-wrap{    margin: 0 200px 0 150px;}.left{    float: left;    width: 150px;    height: 50px;    background-color: red;    margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/}.right{    float: left;    width: 200px;    height: 50px;    background-color: yellow;    margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/}    </style></head><body>    <div class="middle">        <div class="middle-wrap">middle</div>    </div>    <div class="left">left</div>    <div class="right">right</div></body></html>
登录后复制

双飞翼布局的最大优点是它的兼容性——可以兼容到IE6.

最后我还想说说CSS3的flex布局方法

该方式的思想是设置一个弹性容器包裹三个元素,并将这个容器设置为水平排列(flex-flow:row),左右两边元素设置固定宽度,中间元素设置为flex:1;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>.flex {    display: flex;    flex-flow: row;}.left{    width: 200px;    height: 50px;        background-color: red;}.center{    flex: 1;     height: 50px;    background-color: #fff9ca;}.right {    width: 300px;    height: 50px;    background-color: yellow;}    </style></head><body><div class="flex">    <div class="left">左边</div>    <div class="center">中间</div>    <div class="right">右边</div></div></body></html>
登录后复制

但不得不说的是flex布局的兼容性还不够完善,所以个人不推荐使用这种方式布局。

嘿嘿,以上就是我能想到的实现左右固定,中间自适应的三列布局的几种方式啦啦啦

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号