四、(1)网格视图+媒体查询
(1)网格视图
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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)网格视图+媒体查询
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 适用: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-width: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-width: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>