代码如下：
1 2 3 4 Document 5 6 * { 7 margin: 0; 8 padding: 0; 9 } 10 h2 { 11 margin: 20px 0; 12 } 13 .left1 { 14 width: 200px; 15 height: 100px; 16 green; 17 } 18 .right1 { 19 width: 60%; 20 height: 100px; 21 red; 22 } 23 .left2 { 24 width: 200px; 25 height: 100px; 26 green; 27 display: inline-block; 28 } 29 .right2 { 30 width: 60%; 31 height: 100px; 32 red; 33 display: inline-block; 34 } 35 .left3 { 36 width: 200px; 37 height: 100px; 38 float: left; 39 green; 40 } 41 .right3 { 42 width: 60%; 43 height: 100px; 44 float: right; 45 red; 46 } 47 .mainL, .sitebarL, .mainR, .sitebarR { 48 height: 200px; 49 /*font: bolder 20px/200px '微软雅黑';*/ 50 color: #fff; 51 text-align: center; 52 } 53 .mainL { 54 width: 100%; 55 float: left; 56 } 57 .mainR { 58 width: 100%; 59 float: right; 60 } 61 .mainL .contentL { 62 height: 100%; 63 margin-right: 200px; 64 red; 65 } 66 .mainR .contentR { 67 height: 100%; 68 margin-left: 200px; 69 red; 70 } 71 .contentLR { 72 height: 100%; 73 margin-left: 200px; 74 margin-right: 200px; 75 red; 76 } 77 .sitebarL { 78 width: 200px; 79 float: left; 80 margin-right: -100%; 81 green; 82 } 83 .sitebarR { 84 width: 200px; 85 float: right; 86 margin-left: -100%; 87 green; 88 } 89 .clear { 90 width: 100%; 91 clear: both; 92 height: 10px; 93 } 94 #left { 95 float: left; 96 width: 200px; 97 height: 100px; 98 green; 99 }100 101 #contentL {102 height: 100px;103 red;104 margin-left: 200px;/*==等于右边栏宽度==*/105 }106 #right {107 float: right;108 width: 200px;109 height: 100px;110 green;111 }112 113 #contentR {114 height: 100px;115 red;116 margin-right: 200px;/*==等于左边栏宽度==*/117 }118 #contentLR {119 height: 100px;120 red;121 margin: 0 200px;122 }123 .cont {124 overflow: hidden;125 }126 127 128 129 普通文档布局
130 Left
查看更多关于多列样式布局_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111095