HTML5 DIV+CSS示例:多栏布局,各栏高度自适应相等。

两栏布局:左
background:#bc0080ff;
color:#000;
草根窝
左边内容比较多
左边内容比较多
两栏布局:右
background:#48608e;
color:#000;

通栏布局background:#53c5e7;color:#000;

三栏布局:左
background:#34bc98;
color:#000;
三栏布局:中
background:#35c87a;
color:#000;
中间内容比较多
中间内容比较多
中间内容比较多
三栏布局:右
background:#fe6553;
color:#000;

通栏布局background:#909e9f;color:#000;

两栏布局:左宽右窄
background:#1d6478;
color:#000;
两栏布局:左宽右窄
background:#fee79b;
color:#000;

通栏布局background:#f6a0bb;color:#000;

两栏布局:右宽左窄
background:#91d101;
color:#000;
两栏布局:右宽左窄
background:#f78b26;
color:#000;
右边内容比较多
右边内容比较多
右边内容比较多
右边内容比较多
右边内容比较多
右边内容比较多

通栏布局background:#53c5e7;color:#000;

三栏布局:左
background:#34bc98;
color:#000;
三栏布局:中
background:#35c87a;
color:#000;
中间内容比较多
中间内容比较多
中间内容比较多
中间内容比较多
中间内容比较多
中间内容比较多
中间内容比较多
三栏布局:右
background:#fe6553;
color:#000;
草根窝
官方微信