css实现三列自适应布局都有哪些方法�
Admin 2021-10-18 群英技术资�
这篇文章主要给大家分享css实现三列自适应布局的方法,本文给大家介绍了五种方法,为了按照常规WEB布局,这里全部采用拥有header和footer模式进行左中右布局编写。实现方法及代码如下,需要的朋友可以参考�
实现思路
常规思路,使左右两个Aside分别浮动至左右两侧即�
代码实现
<!-- HTML部分 --> <div class="container"> <!-- 顶部Header --> <header>这里是头�</header> <!-- 中间aside及content --> <div class="middle clearfix"> <aside class="left"></aside> <aside class="right"></aside> <!-- 中间content显示内容 为了防止将右侧挤下去故放置在右侧栏下� --> <div class="content">这里是内�</div> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } .clearfix { zoom: 1; &::after { display: block; content: ' '; clear:both } } html, body { width: 100%; height: 100% } .container { width: 100% height: 100% header { height: 80px; background: rgba(0, 0, 0, 0.5) } footer { height: 80px; background: rgba(0, 0, 0, 0.5) } .middle { height: calc(100% - 80px - 80px) aside { height: 100%; width: 300px; background: rgba(156, 154, 249, 1) } .left { float: left } .right: { float: right } } } } </style>
实现效果
实现思路
为中间三栏父级赋予position: relative,赋予左右Aside position: absolute,并且分别赋予left: 0 right: 0 width:自定义值,赋予中间content left,right 分别等于左右width即可
代码实现
<!-- HTML相关代码 --> <div class="container"> <!-- 顶部Header --> <header></header> <div class="middle"> <!-- 左侧Aside --> <aside class="left"></aside> <!-- 中间content内容 --> <div class="content">这里是内�</div> <!-- 右侧Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS相关代码 --> <style lang="scss"> * { margin: 0; padding: 0 } html, body { width: 100%; height: 100% } .container { width: 100%; height: 100%; header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { height: calc(100% - 80px - 80px); position: relative; aside, .content { position: absolute; } .left { width: 300px; background: rgba(156, 154, 249, 1); left: 0; height: 100%; } .right { width: 300px; background: rgba(156, 154, 249, 1); right: 0; height: 100%; } .content { left: 300px; right: 300px; } } } </style>
实现效果
实现思路
赋予左中右三列父级display: flex,赋予左右Aside width自定义,赋予中间content flex:1即可
代码实现
<!-- HTML相关代码 --> <div class="container"> <!-- 顶部Header --> <header></header> <div class="middle"> <!-- 左侧Aside --> <aside class="left"></aside> <!-- 中间content内容 --> <div class="content">这里是内�</div> <!-- 右侧Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { display: flex; height: calc(100% - 80px - 80px); aside { width: 300px; background: rgba(156, 154, 249, 1); } .content: { flex: 1; } } } </style>
实现效果
实现思路
赋予左中右三列父级display: table, width: 100%,分别赋予左中右三列display: table-cell,分别赋予左右Aside width即可�
代码实现
<!-- HTML相关代码 --> <div class="container"> <!-- 顶部Header --> <header></header> <div class="middle"> <!-- 左侧Aside --> <aside class="left"></aside> <!-- 中间content内容 --> <div class="content">这里是内�</div> <!-- 右侧Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { display: table; width: 100% height: calc(100% - 80px - 80px); aside { width: 300px; display: table-cell; background: rgba(156, 154, 249, 1); } .content: { display: table-cell; } } } </style>
实现效果
实现思路
赋予左中右三列父级display: grid,并且使用grid-template-columns: 300px auto 300px,将其分为宽�300px、auto�300px三列布局即可�
代码实现
<!-- HTML相关代码 --> <div class="container"> <!-- 顶部Header --> <header></header> <div class="middle"> <!-- 左侧Aside --> <aside class="left"></aside> <!-- 中间content内容 --> <div class="content">这里是内�</div> <!-- 右侧Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { display: grid; grid-template-columns: 300px auto 300px; height: calc(100% - 80px - 80px); aside { background: rgba(156, 154, 249, 1); } } } </style>
实现效果
关于css实现三列自适应布局的方法就介绍到这,上述方法及代码具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多css实现三列自适应布局的方法,大家可以关注其它的相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
我们在制作HTML页面时,经常会遇到浮动问题,如果当子元素浮动时,不清除浮动就会导致后面的元素排版乱序。那么都有什么方法能够清除浮动呢�
css中虚线框怎么表示在css中虚线框有两种表示方法�1、利用border-style: dashed;样式,示例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
css设置虚线分割线的方法�1、利用“元素{height:0;}”语句,将元素的高设置为0�2、给高度�0的元素添加border属性,将元素的边框样式设置为虚线即可,语法为“border:粗细� dashed 颜色�;”�
这篇文章给大家分享的是CSS实现多张图片居中的方法。小编觉得挺实用的,对于多张图片展示可以应用,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧,实现效果及步骤如下�
before � after其实就是附着在元素前后的伪元素,说他是伪元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染引擎渲染CSS的时候画上去的,这篇文章主要给大家介绍了关于CSS3中伪元素::before�::after的用法,需要的朋友可以参考学习�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078