如何使用CSS布局左右两栏?

html-css027

如何使用CSS布局左右两栏?,第1张

手机浏览器一般都不支持

float

浮动,所以可以用

display:

inline-block

来代替它,当然你也可以用table来布局。用两个

display:inline-block

的块元素,并设定它们的宽度:width:49%

就可以实现一栏两列的布局了。

三栏布局一般指的是页面中一共有三栏, 左右两栏宽度固定,中间自适应的布局 ,三栏布局的具体实现:

利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。