（1）网格视图
<!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>网格视图</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} /*2、设置网格视图的CSS样式:即 class="col-" 和一个数字，该数字定义此节应跨越的列数*/ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} [class*="col-"]{/*3、统一设置列的样式*/ float: left; background-color: #EEEEEE; height: 300px; text-align: center; vertical-align: middle;line-height: 300px; } .row::after {/*4、新的现代clearfix hack 技术使用起来更安全（取代了overflow: auto clearfix），来解决元素溢出容器的问题，即清除流的样式*/ content: ""; clear: both; display: table; } /*5、差异性设置列的样式*/ div.main{ border-style: solid; border-width: 0 5px; border-color: white; } </style> </head> <body><!--1、创建html结构--> <div class="content row"> <div class="asideLeft col-3">左侧内容</div> <div class="main col-6">主内容</div> <div class="asideRight col-3">右侧内容</div> </div> <div>清除流的样式</div> </body>
（2）网格视图+媒体查询
<!-- 适用：IE6以上包括6。 缺点：左侧内容、右侧内容、主内容，这三个div的高必须是固定的（即高度明确）。 假设：高度具有弹性（即非固定），则会出现内容溢出div的问题。后续出现元素重叠覆盖问题。 解决方法：使用 Flexbox 创建弹性框。它可以自动拉伸框使其与最长的框一样长。 --> <!--在网格视图的基础上进行二次修改--> <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>媒体查询+网格视图</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} /*1、针对手机：媒体查询，始终移动优先设计，将使页面在较小的设备上显示得更快。（没有设置@media媒体查询条件，则默认查询条件是移动设备）*/ [class*="col-"]{ width: 100%; } [class*="col-"]{/*公用：还是得统一设置列的样式*/ float: left; background-color: #EEEEEE; height: 300px; text-align: center; vertical-align: middle;line-height: 300px; } .row::after {/*公用：还是得清除流的样式*/ content: ""; clear: both; display: table; } div.main{ border-style: solid; border-width: 5px 0; border-color: white; } /*2、针对平板电脑和笔记本电脑*/ @media only screen and (min-600px) {/*两组类几乎相同，唯一的区别是名称（col- 和 col-s-）*/ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} div.main{ border-style: solid; border-width: 5px 0 0 0; border-color: white; margin-top:300px; } div.asideLeft{ border-right: 2.5px solid white; position: absolute; left: 0; } div.asideRight{ border-left: 2.5px solid white; position: absolute; right: 0; } } /*3、针对台式机*/ @media only screen and (min-769px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} div.main{ border-style: solid; border-width: 0 5px; border-color: white; margin-top:0px; margin-left: 25%; } } </style> </head> <body> <div class="content row"> <div class="asideLeft col-3 col-s-6" >左侧内容</div> <div class="main col-6 col-s-12" >主内容</div> <div class="asideRight col-3 col-s-6">右侧内容</div> </div> <div>清除流的样式</div> </body>