CSS居中和多列布局
来源:互联网 发布:淘宝推广赚佣金 编辑:程序博客网 时间:2024/05/21 12:39
居中布局
水平居中
(父元素和子元素的宽度都未知)
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 居中布局
- Java SynchronizedMap ConcurrentMap ConcurrentHashMap
- 我的selenium日记2
- Android基础知识-Activity
- talend中变量的定义
- 实训阶段总结(五)
- CSS居中和多列布局
- leetcode 32. Longest Valid Parentheses __ java
- Rsync的其他几个常见参数
- 罗马数字
- Platt SMO 支持向量机算法(Python实现)
- 7.6 MCodeForces 687CThe Values You Can Make
- 通过多项式来拟合股票收盘价的趋势图
- Intellij Idea基于现有的Eclipse工程创建 多模块工程--spring spring mvc hibernate - SSH- resin
- (一) linux内核基础