CSS居中和多列布局
来源:互联网 发布:凸优化 中文版 pdf 编辑:程序博客网 时间:2024/05/17 23:54
居中布局
水平居中
(父元素和子元素的宽度都未知)
1、inline-block + text-ailgn
.child{display:inline-block;}
.parent{text-align:center;}
优点:兼容性好
缺点:子元素文本继承了text-align属性,子元素要额外加text-align:left;
2、table + margin
.child{display:table; margin:0 auto;}
优点:只需要设置子元素的样式
3、absolute + transform
.parent{position:relative;}
.child{position:absolute; left:50%; transform: translateX(-50%);
优点:居中子元素不会对其他元素产生影响
缺点:transform是CSS3的属性,存在兼容性问题
4、flex + justify-content
.parent{display:flex; justify-content:center;}
优点:只需要设置父元素的样式
缺点:兼容性问题
5、flex + margin
.parent{display:flex;}
.child{margin:0 auto;}
垂直居中
(父容器和子容器的高度都未知)
1、table-cell + vertical-align
.parent{display:table-cell; vertical-align:middle;}
优点:兼容性好
2、absolute + transform
.parent{position:relative;}
.child{position:absolute; top:50%; transform:translateY(-50%);}
优点:子元素不会干扰其他元素
缺点:兼容性
3、flex + align-item
.parent{display:flex; align-items:center;}
优点:只需要设置父元素
缺点:兼容性问题
水平垂直居中
(父容器和子容器的高度都未知)
inline-block + text-align + table-cell + vertical-align
.parent{text-align:center; display:table-cell; vertical-align:middle;}
.child{display: inline-block;}
absolute + transform
.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
flex + justify-content + align-item
.parent{display:flex; justify-content:center; align-items:center;}
多列布局
定宽-自适应
1、float+margin
.left{float:left; width:100px;}
.right{margin-left:120px;}
float+margin+fix
<div class="left"></div>
<div class="right-fix">
<div class="right"></div>
</div>
外层再包裹一个容器
.left{float:left; width:100px; position: relative;}
.right-fix{float:right; width:100%; margin-left:-100px;}
.right{margin-left:120px;}
兼容性很好,但是多了层right-fix的结构
2、float+overflow
.left{float:left; width:100px; margin-right: 20px;}
.right{overflow:hidden;
table
.parent{display:table; width:100%; table-layout:fixed;}
.left,.right{display:table-cell;}
.left{width:100px; padding-right:20px;}
flex
.parent{display:flex;}
.left{width:100px; margin-right:20px;}
.right{flex:1;}
不定宽-自适应
float + overflow
.left{float:left; margin-right:20px;}
.right{overflow:hidden;}
table
.parent{display:table; width:100%;}
.left,.right{display:table-cell;}
.left{width:0.1%; padding-right:20px;}
flex
.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}
- CSS居中和多列布局
- CSS居中和多列布局
- css居中和布局
- css 多列布局
- CSS多列布局
- CSS多列布局
- CSS多列布局
- DIV+CSS 三行二列居中高度自适应布局
- 三行二列居中高度自适应布局DIV+CSS
- CSS布局——DIV水平居中和垂直居中
- HTML- css多列布局
- CSS多列布局方案
- css布局-多行文字垂直居中
- css布局-多行文字垂直居中
- Div+CSS布局居中
- css布局 居中总结
- css布局 居中总结
- div+css 居中布局
- MYSQL 存储过程的一点学习
- 数据结构之堆的复习
- iOS获取UUID,并使用keychain存储,可用于封设备
- ★leetcode05_Longest Palindromic Substring
- LIB和DLL的区别和使用
- CSS居中和多列布局
- 文章标题
- 909422229__利用dom4j修改XML数据_进行增删改查【最新】
- 【UVa】10298 - Power Strings
- 2017滴滴出行面试题 n 张桌子吃饭的最大利润
- Lightoj1009——Back to Underworld(DFS)
- [Android开发]ScrollView中嵌套ListView
- Anadroid 之使用ImageLoader 默认配置和手动配置参数
- 千里之行,始于足下