浅析两列自适应布局的3种思路


Posted in HTML / CSS onMay 03, 2016

前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。

思路一: float

在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用。而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc,来阻止浮动造成的文字环绕效果。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器

CSS Code复制内容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{overflowhidden;zoom: 1;}   
  4. .left{floatleft;margin-right20px;}       
  5. .rightright{overflowhidden;zoom: 1;}   
  6. </style>  

 

XML/HTML Code复制内容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>  
  5.     <div class="right"  style="background-color: lightgreen;">  
  6.         <p>right</p>  
  7.         <p>right</p>  
  8.     </div>           
  9. </div>  

浅析两列自适应布局的3种思路

 思路二: table

若table元素不设置table-layout:fixed,则宽度由内容撑开。在某个table-cell元素的外层嵌套一层div,并设置足够小的宽度如width:0.1%

CSS Code复制内容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display:table;width:100%;}   
  4. .leftWrap{display:table-cell;width:0.1%;}   
  5. .left{margin-right20px;}       
  6. .rightright{display:table-cell;}   
  7. </style>  
XML/HTML Code复制内容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="leftWrap" style="background-color: pink;">  
  3.         <div class="left" style="background-color: lightblue;">  
  4.             <p>left</p>  
  5.         </div>           
  6.     </div>  
  7.     <div class="right"  style="background-color: lightgreen;">  
  8.         <p>right</p>  
  9.         <p>right</p>  
  10.     </div>           
  11. </div>  

浅析两列自适应布局的3种思路

思路三: flex

flex弹性盒模型是非常强大的布局方式。基本上,一般的布局方式都可以实现

[注意]IE9-不支持
 

CSS Code复制内容到剪贴板
  1. <style>   
  2. p{margin: 0;}   
  3. .parent{display:flex;}     
  4. .rightright{margin-left:20px; flex:1;}   
  5. </style>  
XML/HTML Code复制内容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="left" style="background-color: lightblue;">  
  3.         <p>left</p>  
  4.     </div>           
  5.     <div class="right"  style="background-color: lightgreen;">  
  6.         <p>right</p>  
  7.         <p>right</p>  
  8.     </div>           
  9. </div>  

浅析两列自适应布局的3种思路

以上这篇浅析两列自适应布局的3种思路就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/xiaohuochai/archive/2016/05/03/5454232.html

HTML / CSS 相关文章推荐
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 #HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 #HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 #HTML / CSS
CSS3使用多列制作瀑布流
May 10 #HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 #HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 #HTML / CSS
You might like
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
javascript闭包入门示例
2014/04/30 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python实现内存监控系统
2021/03/07 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python基础 range的用法解析
2019/08/23 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python 8种必备的gui库
2020/08/27 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
期中考试反思800字
2014/05/01 职场文书
作风建设整改方案
2014/10/27 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
讲解Python实例练习逆序输出字符串
2022/05/06 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis