左右布局
最常见之一：方法有两种浮动 float和flex；
float
使元素浮动脱离文档流
具体实现和效果
/*--HTML-- */
<div class="parents clearfix">
<div class="child-l"></div>
<div class="child-r"></div>
</div>
/*--CSS--*/
.clearfix::after{ /*--清浮动-- */
content:"";
display:block;
clear:both;
}
.parents{
height:300px;
border:1px solid #000;
}
.child-l{
float:left; /*--左浮动-- */
border:2px solid red;
height:200px;
width:30%;
}
.child-r{
float:right; /*--右浮动-- */
border:2px solid blue;
height:200px;
width:30%;
}
flex：
Flexible Box 的缩写，意为弹性布局
<div class="parents clearfix">
<div class="child-l"></div>
<div class="child-r"></div>
</div>
.parents{
display:flex; /*使用弹性布局*/
justify-content:space-between; /*使parents里面的子元素两端对齐*/
height:300px;
border:1px solid #000;
}
.child-l{
border:2px solid red;
height:200px;
width:30%;
}
.child-r{
border:2px solid blue;
height:200px;
width:30%;
}
image.png
左中右布局：
float：
<div class="parents clearfix">
<div class="child-l"></div>
<div class="child-c"></div>
<div class="child-r"></div>
</div>
/*css*/
.clearfix::after{ /*--清浮动-- */
content:"";
display:block;
clear:both;
}
.parents{
height:300px;
border:1px solid #000;
}
.child-l{
float:left; /*--左浮动-- */
border:2px solid red;
height:200px;
width:30%;
}
.child-c{
float:left; /*--左浮动-- */
border:2px solid green;
margin-left:4.2%;/*--左外边距（3个合资border占用所以不是5%）-- */
height:200px;
width:30%;
}
.child-r{
float:right; /*--右浮动-- */
border:2px solid blue;
height:200px;
width:30%;
}
flex:
.parents{
display:flex;/*使用弹性布局*/
justify-content:space-between; /*使parents里面的子元素两端对齐*/
height:300px;
border:1px solid #000;
}
.child-l{
border:2px solid red;
height:200px;
width:30%;
}
.child-c{
border:2px solid green;
height:200px;
width:30%;
}
.child-r{
border:2px solid blue;
height:200px;
width:30%;
}
inline-block:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="parents clearfix">
<div class="child-l"></div>
<div class="child-c"></div>
<div class="child-r"></div>
</div>
</body>
</html>
/*css*/
.parents{
border:1px solid #000;
}
.child-l{
display: inline-block;
border:2px solid red;
height:200px;
width:30%;
}
.child-c{
display: inline-block;
border:2px solid green;
margin:0 3.25%;/*--左右外边距-- */
height:200px;
width:30%;
}
.child-r{
display: inline-block;
border:2px solid blue;
height:200px;
width:30%;
}
image.png
居中
水平居中
margin实现块级元素水平居中
给设置好宽度的块级元素设置的margin: 0 auto;实现水平居中
inline-block实现水平居中
给元素设置display: inline-block;,设置父级元素的属性width: 100%;text-align: center;
flex实现水平居中
父级元素设置display: flex;justify-content: center;即可
垂直居中
利用padding或line
可以设置上下padding
line-height和height相等实现。
利用display: table
父级元素设置display: table;,子元素设置display: table-cell;vertical-align: middle;
注意 需要把父级元素font-size设置为0。如果想要兼容ie8及以下，需要把::before改为:before。
利用position定位
父级元素设置position: relative;，子元素设置positon:absolute;,在利用margin实现垂直居中
flex
父级元素设置flex和align-items: center
参考文档：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.jianshu.com/p/bf56714392a2
网友评论