css自适应布局方法,css3自适应布局
前言
为了按照常规网布局，这里全部采用拥有页眉和页脚模式进行左中右布局编写。
第一种：基于float实现
实现思路
常规思路，使左右两个在旁边分别浮动至左右两侧即可
代码实现
！- HTML部分- div class=container ！-顶部标题-标题这里是头部/header！-中间在旁边及闪开，闪开，闪开！-中间内容显示内容为了防止将右侧挤下去故放置在右侧栏下方- div class=content 这里是内容/div /div！-底部页脚-页脚/页脚/div！- CSS部分-style lang= scss * { margin:0；填充：0;} .清除修复{ zoom:1；*在{显示：块；内容："";clear:both } } html，body { width:100%；身高：100% }。容器{宽度：100%高度：100%页眉{高度：80px背景：rgba(0，0，0，0.5) }页脚{高度：80px背景：rgba(0，0，0，0.5) } .中间{身高：计算(100% - 80px - 80px)抛开{身高：100%;宽度：300像素背景：rgba(156，154，249，1) } .left { float: left } .right:{ float:right } } }/style实现效果
第二种：基于position：absolute实现
实现思路
为中间三栏父级赋予位置：相对，赋予左右靠边站：绝对，并且分别赋予左：0右：0宽度：自定义值，赋予中间内容左侧，右侧分别等于左右宽度即可
代码实现
！- HTML相关代码- divclass=container ！-顶部header-header/header div class= middle ！-左侧闪开-aside class= left /闪开！-中间内容内容- divclass=content 这里是内容/div！-右侧side-side class= right /side/div！-底部页脚-页脚/页脚/div！- CSS相关代码-style lang= scss * { margin:0；padding: 0 } html，body { width:100%；身高：100% }。容器{宽度：100%;身高：100%;页眉{高度：80px背景：rgba(0，0，0，0.5)；}页脚{身高：80px背景：rgba(0，0，0，0.5)；} .中间{高度：calc(100%-80px-80px)；位置：相对；先不说。内容{位置：绝对；} .左{宽度：300 px背景：rgba(156，154，249，1)；左：0;身高：100%;} .右{宽度：300像素背景：rgba(156，154，249，1)；右：0;身高：100%;} .内容{左：300 px右：300px} } }/样式实现效果
第三种：基于display：flex实现
实现思路
赋予左中右三列父级显示器：flex，赋予左右侧面宽度自定义，赋予中间内容弹性：1即可
代码实现
！- HTML相关代码- div class=container ！-顶部header-header/header div class= middle ！-左侧靠边站，靠边站！-中间内容内容- div class=content 这里是内容/div！-右侧靠边站！-底部页脚-页脚/页脚/div！- CSS部分-style lang= scss * { margin:0；填充：0;} html，body { width:100%；身高：100%;} .容器{ header { height:80px；背景：rgba(0，0，0，0.5)；}页脚{身高：80px背景：rgba(0，0，0，0.5)；} .中间{ display:flex；高度：calc(100%-80px-80px)；旁白{宽度：300像素背景：rgba(156，154，249，1)；} .内容：{ flex:1；} } }/样式实现效果
第四种：基于display: table实现
实现思路
赋予左中右三列父级显示：表格，宽度：100%,分别赋予左中右三列显示：表格单元，分别赋予左右侧面宽度即可。
代码实现
！- HTML相关代码- div class=container ！-顶部header-header/header div class= middle ！-左侧靠边站，靠边站！-中间内容内容- div class=content 这里是内容/div！-右侧靠边站！-底部页脚-页脚/页脚/div！- CSS部分-style lang= scss * { margin:0；填充：0;} html，body { width:100%；身高：100%;} .容器{ header { height:80px；背景：rgba(0，0，0，0.5)；}页脚{身高：80px背景：rgba(0，0，0，0.5)；} .中间{显示：表格；宽度：100%高度：calc(100%-80px-80px)；旁白{宽度：300像素显示：表格单元；背景：rgba(156，154，249，1)；} .内容：{显示：表格单元格；} } }/样式实现效果
第五种：基于display: grid实现
实现思路
赋予左中右三列父级显示：网格，并且使用网格-模板-列：300像素自动300像素，将其分为宽为300像素、自动、300像素三列布局即可。
代码实现
！- HTML相关代码- div class=container ！-顶部header-header/header div class= middle ！-左侧靠边站，靠边站！-中间内容内容- div class=content 这里是内容/div！-右侧靠边站！-底部页脚-页脚/页脚/div！- CSS部分-style lang= scss * { margin:0；填充：0;} html，body { width:100%；身高：100%;} .容器{ header { height:80px；背景：rgba(0，0，0，0.5)；}页脚{身高：80px背景：rgba(0，0，0，0.5)；} .中间{显示：网格；网格-模板-列：300像素自动300像素高度：calc(100%-80px-80px)；旁白{背景：rgba(156，154，249，1)；} } }/样式实现效果
到此这篇关于详解半铸钢钢性铸铁(铸造半钢)多种三列自适应布局实现的文章就介绍到这了，更多相关半铸钢钢性铸铁(铸造半钢)三列自适应布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。