CSS两栏布局,三栏布局

两栏布局

float+margin(一侧定宽,一侧自动)

在线预览:

See the Pen JKwjwL by abcdGJJ (@abcdGJJ) on CodePen.

原理:左div定宽浮动,右div正常文档流并以左div左上角布局,右div中的文字围绕在浮动元素周围。为了使右div相对于左div布局,需要加上margin-left属性。

笔记:float元素浮动后拥有块元素属性

position+margin(一侧定宽,一侧自动)

在线预览:

See the Pen dXwPpA by abcdGJJ (@abcdGJJ) on CodePen.

原理:使用absolute脱离文档流,文字不围绕在absolute元素周围

float+负margin(一侧定宽,一侧自动)

在线预览:

See the Pen QEzwvp by abcdGJJ (@abcdGJJ) on CodePen.

原理:使用父元素占位,左div设置负margin补位

三栏布局

float+margin(两侧定宽,中间自适应)

在线预览:

See the Pen dXwPjb by abcdGJJ (@abcdGJJ) on CodePen.

原理:左右浮动,中间宽度100%,加上margin。注意:左右两侧的div需要写在中间的div之前

position+margin(两侧定宽,中间自适应)

在线预览:

See the Pen AXYjJJ by abcdGJJ (@abcdGJJ) on CodePen.

原理:脱离文档流,但中间div不必写在最后

float+负margin(两侧定宽,中间自适应)

在线预览:

See the Pen rLoaQK by abcdGJJ (@abcdGJJ) on CodePen.

原理:负margin运用

float+position+margin(两侧自动,中间定宽)

在线预览:

See the Pen OXAPGp by abcdGJJ (@abcdGJJ) on CodePen.

原理:左右浮动,中间绝对定位

position+margin(两侧自动,中间定宽)

在线预览:

See the Pen LkrVPY by abcdGJJ (@abcdGJJ) on CodePen.