一个好的css布局对于一个页面的重要程度,相信大家心里都明白。
完成一个两栏,三栏,等高等布局,在页面总是非常常见。所以我这边总结了一些方法。
两栏布局
一栏定宽,一栏自动
思路一:float + margin
左边设定宽度并左浮动 float:left
右边只需要设定margin-left:左边的宽度
思路二:position + margin
左边定义宽度并设置成绝对定位 position:absolute
右边 margin-left:左边的宽度
思路三:flex
父级div设定 display:flex
左边设置宽度
右边 flex:1
三栏布局
两侧定宽,中间自动
思路一:float+margin
左右两侧分别浮动左右(或者是绝对定位,参考 一栏顶宽 的思路二)
中间 margin : 0 右边宽度 0 左边宽度
思路二:float + 负margin
中间在另一个div里面嵌套
左边 margin:-100%
右边 margin:-自身宽度
思路三: float+flex (flex有兼容问题)
在父级设定 display:flex
中间的div flex:1
(假设中间的最小在100px的时候)
两侧自动,中间定宽
思路一:
左右两栏的父div分别设置自己宽度 width:50%
,分别占据左右两边。
子div(也就是他们的 .left .right
)左边的子div右边距为中间宽度的一半,右边的左边距也为中间宽度一半。
这样他们刚好就留出中间的宽度来了
中间的div:就按照css居中一个div的方法,将中间的div居中, 并且是绝对定位,然后设置 z-index
防止被覆盖
思路二:flex(有兼容问题)
中间的定宽,左右分别占据剩下盒子的一半,平分
好啦,这次咱们先说这些,下一篇我会说说定高度布局问题