-
左右布局
以div为例,左右布局就是给左边的子元素一个
float: left
,给右边的子元素一个float: right
,然后给他们的父盒子一个清除浮动的class,class样式模板可以参考:.clearfix::after { content: ''; display: block; clear: both; }
-
左中右布局
还是以div为例,给三个子元素一个
float: left
,然后给所有元素一个margin-left: 自定义空隙,最后把第一个子元素的margin-left: 0;
即可。假如所有字元素都是一种类型,可以用伪类选择器选中第一个:nth-child(1)
。 -
水平居中
-
如果要居中的内容是块级元素,可以给元素的
margin-left: auto
和margin-right: auto
注:两个属性要同时写
-
如果要居中的内容是内联元素,可以给元素的父元素一个
text-align: center
即可。
-
-
垂直居中
给当前元素上下一个相同的margin或padding即可,如:
margin: 10px;
或padding: 10px 0
。 -
拓展小技巧:
在使用左右布局时,如果有多行内容(如多行两列的div)。可以先给每个div一个左浮动(
float: left
),注意不要忘了给父元素添加清除浮动。然后再用伪类选择器选择偶数的子元素(:nth-child(even)
even即选择偶数的意思)。
网友评论