css3弹性盒子flex实现三栏布局的实现_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

www.zgxue.com防采集请勿采集本网。

如题:高度已知,左右栏宽度300px,中间自适应:

弹性盒子本身就是并排的,我们设置宽度即可。

用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏布局</title></head><style type="text/css"> html*{ margin: 0; padding: 0; } .container{ display: flex; } .left{ background-color: aqua; width: 300px; height: 100px; } .center{ height: 100px; flex: 1; background: #f296ff; } .right{ height: 100px; background-color: #6ee28d; width: 300px; }</style><body><!-- 已知高度,写出三栏布局,左右宽度300px,中间自适应--><div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div></div></body></html>

效果如图:

到此这篇关于css3弹性盒子flex实现三栏布局的实现的文章就介绍到这了,更多相关css3 flex三栏布局内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

  css只能写出框架,即伸缩效果所需要的所有框架内容。  真正实现效果,需要借助js等代码来实现内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 移动端优先的flex三栏布局的使用方法
  • CSS3布局,如何实现右侧栏伸缩效果?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css3flex三栏布局移动端优先的flex三栏布局的使用方法css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分使用css3背景渐变中的透明度来设置不同颜色的背景渐变css3 按钮边框动画的实现css3 实现发光边框特效css3 实现图形下落动画效果css 说明横向进度条最后显示文字的实现代码css3制作3d立方体loading特效css3实现莲花绽放的动画效果css3制作圆形滚动进度条动画的示例css实现进度条和订单进度条的示例一篇文章带你学习css3图片边框css3实现时间轴特效
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved