不相等的列

　　

　　不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

　　

　　CSS3 实例

　　

　　.column {

　　

　　float: left;

　　

　　}

　　

　　/* 左右侧栏的宽度 */

　　

　　.column.side {

　　

　　width: 25%;

　　

　　}

　　

　　/* 中间列宽度 */

　　

　　.column.middle {

　　

　　width: 50%;

　　

　　}

　　

　　/* 响应式布局 - 宽度小于600px时设置上下布局 */

　　

　　@media screen and (max-width: 600px) {

　　

　　.column.side, .column.middle {

　　

　　width: 100%;

　　

　　}

　　

　　}