CSS常用布局之——一列定宽,一列自适应解决方案
2017-05-02 20:10
471 查看
纵观css盒子(标准or非标准)常用的布局中,我大致分为2类,一种是居中,一种是等分。居中包含了水平居中,垂直居中,水平垂直居中;等分又包含了等分块布局,等分高布局……
IE 6 中会有3像素的 BUG,解决方法可以在 .left 加入 margin-left:-3px
2. float + overflow
设置 overflow: hidden 会触发 BFC 模式(Block Formatting Context)块级格式上下文
3. table
4. flex
低版本浏览器兼容问题
一列定宽,一列自适应
1. float + margin<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .left { float: left; width: 100px; } .right { margin-left: 100px /*间距可再加入 margin-left */ } </style>
IE 6 中会有3像素的 BUG,解决方法可以在 .left 加入 margin-left:-3px
2. float + overflow
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .left { float: left; width: 100px; } .right { overflow: hidden; } </style>
设置 overflow: hidden 会触发 BFC 模式(Block Formatting Context)块级格式上下文
3. table
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; } .right { display: table-cell; /*宽度为剩余宽度*/ } </style>
table的显示特性为每列的单元格宽度和一定等与表格宽度。
table-layout: fixed可加速渲染,也是设定布局优先。
table-cell中不可以设置
margin但是可以通过
padding来设置间距
4. flex
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style> .parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; } </style>
低版本浏览器兼容问题
相关文章推荐
- CSS 几种常用自适应布局
- 常用自适应样式 CSS 布局
- CSS网页布局入门教程2:一列自适应宽度
- 关于利用css 实现右侧固定 左侧自适应布局的解决方案
- css布局—一列宽度固定,一列宽度自适应
- CSS网页布局入门教程2:一列自适应宽度
- CSS常用布局之——等分等高解决方案
- 教你一个最常用的前台小模块布局的最佳css解决方案,兼容IE8.0 7.0 6.0 Firefox3.5 2.0 google oprea 苹果浏览器等
- CSS布局之两列布局一列固定一列自适应
- css 一列固定一列自适应布局-flex布局实现
- CSS布局,上下布局,左右布局,一列固定,剩下的自适应屏幕大小
- CSS基础篇--css实现两列布局,一列固定宽度,一列宽度自适应方法
- CSS常用布局之——水平垂直居中解决方案
- css两列布局,一列固定宽度,另一列自适应宽度
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
- 教你一个最常用的前台小模块布局的最佳css解决方案,兼容IE8.0 7.0 6.0 Firefox3.5 2.0 google oprea 苹果浏览器等
- CSS网页布局入门教程8:三列浮动中间列宽度自适应
- CSS网页布局入门教程8:三列浮动中间列宽度自适应
- div+css布局漫谈 之 CSS布局常用的方法
- 网页制作之CSS常用网站布局实例