多列式布局自我总结（包括案例）
案例一：灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位和居中问题</title> <link rel="stylesheet" type="text/css" href="../css/task_4.css"/> </head> <body> <div class="container"> <div class="left"> </div> <div class="right"> </div> </div> </body> </html>
.container{ width: 400px; height: 200px; background: #ccc; /*设置垂直及水平居中*/ position: absolute; top: 50%; left: 50%; margin-left: -200px;/*为长度的一半，类似于将中心点移至中心*/ margin-top: -100px; } .left{ background: #fc0; width: 50px; height: 50px; border-radius: 0 0 50px 0; /*画半圆，朝向（左上、右上、右下、左下）*/ } .right{ background: #ff0; width: 50px; height: 50px; margin: 100px 0 0 350px; border-radius: 50px 0 0 0; }
案例二：左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee ，区域的高度取决于三个子元素中最高的高度
对于三列布局，可以采用浮动加定位的方法，对于左右两侧的盒子进行浮动处理，对于中间元素（盒子）进行设置其左右margin来实现定位。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link href="../css/test_3lan.css" type="text/css" rel="stylesheet"/> 5 <meta charset="UTF-8"> 6 <title>三栏式布局</title> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="left fl"> 11 <img src="../img/001.jpg" class="logo team-logo fl"/> 12 <div class="fl team-name">团队名称</div> 13 </div> 14 <div class="right fr"> 15 <img src="../img/001.jpg" class="logo person-logo" /> 16 <img src="../img/001.jpg" class="logo person-logo" /> 17 <img src="../img/001.jpg" class="logo person-logo" /> 18 <img src="../img/001.jpg" class="logo person-logo" /> 19 <img src="../img/001.jpg" class="logo person-logo" /> 20 </div> 21 <div class="mid"> 22 <span>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 23 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 24 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 25 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 26 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 27 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 28 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 29 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 30 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 31 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 32 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 33 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 34 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 35 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 36 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 37 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 38 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 39 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 40 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 41 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 42 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 43 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 44 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 45 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 46 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 47 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 48 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 49 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 50 介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介 51 绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</span> 52 </div> 53 </div> 54 </body> 55 </html>
1 /*清除默认格式*/ 2 body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{padding: 0;margin: 0;} 3 body{font-size: 14px;} 4 img{border: none;} 5 li{list-style: none;} 6 a{text-decoration: none;} 7 input,select,textarea{outline: none;} 8 textarea{resize: none;} 9 /*清浮动*/ 10 .clearfix:after{content: "";display: block;clear: both;} 11 .clearfix{ 12 overflow:auto; 13 zoom: 1; //ie6兼容解决办法 14 } 15 .fl{ 16 float:left ; 17 } 18 .fr{ 19 float: right; 20 } 21 /*清除padding内边距影响盒子宽度*/ 22 * { 23 -webkit-box-sizing: border-box; 24 -moz-box-sizing: border-box; 25 box-sizing: border-box; 26 } 27 body{ 28 background: #fff; 29 } 30 .container{ 31 background: #eee; 32 border: solid 1px #999; 33 padding: 20px; 34 margin:20px; 35 /*此处实现了区域的高度是由三列的最长的高度来决定的， 36 * 由于左右两列采用了fr和fl浮动脱离了文档流， 37 * 所以若不设置，则区域的高度是由中间列的高度来决定 38 * 所以当高度超过mid的时候，便会溢出 39 * 所以在此设置 40 */ 41 overflow:auto; 42 min-width: 700px; 43 } 44 .left,.mid,.right{ 45 background: #fff; 46 border: 1px #999999 solid; 47 } 48 .left{ 49 width: 200px; 50 padding: 20px; 51 } 52 .team-name{ 53 margin-left: 20px; 54 } 55 .logo{ 56 width: 80px; 57 height: 80px; 58 } 59 .mid{ 60 margin: 0px 140px auto 220px; /*要点一*/ 61 padding: 20px; 62 } 63 .right{ /*要点二：移动到left的后面就上去了*/ 64 width:120px; 65 padding: 20px 20px 0px; 66 } 67 .person-logo{ 68 margin-bottom: 20px; 69 }
案例三：
- 头部和底部的黑色区域始终是100%宽
- 页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化
- 左侧的各个模块里面的内容及图片宽度跟随左侧整体宽度同步自适应变化
- 10张图片需要永远都完整展现，所以会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行（！图片使用浮动或者行内块元素）
-
-
-
View Code1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML__test1</title> 6 <link rel="stylesheet" href="../css/main.css" type="text/css"/> 7 <link rel="stylesheet" type="text/css" href="../css/reset.css"/> 8 </head> 9 <body> 10 <div class="header"> 11 <img src="../img/task1_s1.png" class="fl"> 12 <ul class="nav fr"> 13 <li> 14 <a href="#">导航链接一</a> 15 </li> 16 <!--a链接标签在li内部？--> 17 <li> 18 <a href="#">导航链接二</a> 19 </li> 20 <li> 21 <a href="#">导航链接三</a> 22 </li> 23 <li> 24 <a href="#">导航链接四</a> 25 </li> 26 </ul> 27 </div> 28 <div class="container"> 29 <div class="sideBar fr"> 30 <h2>以后这是一个侧边栏，这是侧边栏的标题</h2> 31 <form> 32 <table class="register"> 33 <tr> 34 <td class="fr"><label for="address1">请输入邮箱地址：</label></td> 35 <td><input type="text" name="address1" id="address1" title="这是一个文本输入框"></td> 36 </tr> 37 <tr> 38 <td> </td> 39 <td> 40 <p class="t-gray">邮箱地址请按要求格式输入</p> 41 </td> 42 </tr> 43 <tr> 44 <td class="fr"><label for="password-a">请输入密码：</label></td> 45 <td><input type="password" name="password1" id="password1"></td> 46 </tr> 47 <tr> 48 <td class="fr"><label for="password-b">请重复输入密码：</label></td> 49 <td><input type="password" name="password2" id="password2"></td> 50 </tr> 51 <tr> 52 <td> </td> 53 <td> 54 <p class="t-gray">密码请为6-16位英文数字</p> 55 </td> 56 </tr> 57 <tr> 58 <td class="fr">性别：</td> 59 <td><input type="radio" checked="checked" name="sex" value="male" title="男">男 60 <input type="radio" name="sex" value="female" title="女">女</td> 61 </tr> 62 <tr> 63 <td class="fr">城市：</td> 64 <td> 65 <select name="countrys"> 66 <option value="北京">北京</option> 67 <option value="上海">上海</option> 68 <option value="福建">福建</option> 69 <option value="福建">福建</option> 70 <option value="福建">福建</option> 71 <option value="福建">福建</option> 72 </select> 73 </td> 74 </tr> 75 <tr> 76 <td class="fr"> 爱好：</td> 77 <td> 78 篮球：<input type="checkbox" value="篮球" checked="checked"> 79 足球：<input type="checkbox" value="足球" checked="checked"> 80 乒乓球：<input type="checkbox" value="乒乓球"> 81 </td> 82 </tr> 83 <tr> 84 <td class="fr"><label for="imformation">个人描述：</label></td> 85 <td><textarea class="imformation t-gray" name="imformation">这是一个多行复选框，请输入个人描述...</textarea></td> 86 </tr> 87 </table> 88 <input class="button" type="button" value="确认提交"> 89 </form> 90 </div> 91 <div class="left"> 92 <div class="passage-first"> 93 <h1>文章一级标题</h1> 94 <h2>文章二级标题</h2> 95 <span class="t-gray">文章作者 <!--用address标签，来定义文档作者和拥有者的联系信息--> 96 <time>文章发表时间</time></span> 97 <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>换行了<br/>这是一个很长很长的段落， 这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很 长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个 98 <a href="http://www.baidu/com">这里有一个链接到www.baidu.com的链接</a>很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是 一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长 的段落这是一个很长很长的段落这是一个很长很长的段落这是 99 <b>这里有一个粗体字</b>一个很长很长的段落这是一个很长很长的段落这是一个很长这是一个很长很长的段落很长的段落 100 </p> 101 <div class="isb-img"> 102 <img src="../img/001.jpg"> 103 </div> 104 105 <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>换行了<br/>这是一个很长很长的段落， 这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很 长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个 106 <a href="http://www.baidu/com">这里有一个链接到www.baidu.com的链接</a>很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是 一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长 的段落这是一个很长很长的段落这是一个很长很长的段落这是 107 <b>这里有一个粗体字</b>一个很长很长的段落这是一个很长很长的段落这是一个很长这是一个很长很长的段落很长的段落 108 </p> 109 </div> 110 <div class="passage-second"> 111 <h1>另一个文章的一级标题</h1> 112 <h2>文章二级标题</h2> 113 <span class="t-gray">文章作者<time> 文章发表时间</time></span> 114 <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>换行了<br/>这是一个很长很长的段落， 这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很 长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个 115 <a href="http://www.baidu/com">这里有一个链接到www.baidu.com的链接</a>很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是 一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长 的段落这是一个很长很长的段落这是一个很长很长的段落这是 116 <b>这里有一个粗体字</b>一个很长很长的段落这是一个很长很长的段落这是一个很长这是一个很长很长的段落很长的段落 117 </p> 118 <div class="isb-img"> 119 <img src="../img/001.jpg" /> 120 </div> 121 <ul> 122 <li>列表项目一</li> 123 <li>列表项目二</li> 124 <li>列表项目三</li> 125 </ul> 126 </div> 127 <div class="images"> 128 <h1>图片</h1> 129 <div class="iss-img"> 130 <p class="describe-img">好看的图片</p> 131 <img src="../img/001.jpg"> 132 </div> 133 <div class="iss-img"> 134 <p class="describe-img">好看的图片</p> 135 <img src="../img/001.jpg"> 136 </div> 137 <div class="iss-img"> 138 <p class="describe-img">好看的图片</p> 139 <img src="../img/001.jpg"> 140 </div> 141 <div class="iss-img"> 142 <p class="describe-img">好看的图片</p> 143 <img src="../img/001.jpg"> 144 </div> 145 <div class="iss-img"> 146 <p class="describe-img">好看的图片</p> 147 <img src="../img/001.jpg"> 148 </div> 149 <div class="iss-img"> 150 <p class="describe-img">好看的图片</p> 151 <img src="../img/001.jpg"> 152 </div> 153 <div class="iss-img"> 154 <p class="describe-img">好看的图片</p> 155 <img src="../img/001.jpg"> 156 </div> 157 <div class="iss-img"> 158 <p class="describe-img">好看的图片</p> 159 <img src="../img/001.jpg"> 160 </div> 161 </div> 162 <div class="passage-last"> 163 <h1>最后一篇文章一级标题</h1> 164 <h2>文章二级标题</h2> 165 <span class="t-gray">文章作者<time> 文章发表时间</time></span> 166 <ol> 167 <li>排名1</li> 168 <li>排名2</li> 169 <li>排名3</li> 170 </ol> 171 172 <table class="is-table"> 173 <tr> 174 <th class="b">表头1</th> 175 <th class="b">表头2</th> 176 <th class="b">表头3</th> 177 </tr> 178 <tr> 179 <td>表内容单元格</td> 180 <td>表内容单元格</td> 181 <td> 182 <a href="#">操作</a> 183 </td> 184 </tr> 185 <tr> 186 <td>表内容单元格</td> 187 <td>表内容单元格</td> 188 <td> 189 <a href="#">操作</a> 190 </td> 191 </tr> 192 <tr> 193 <td>表内容单元格</td> 194 <td>表内容单元格</td> 195 <td> 196 <a href="#">操作</a> 197 </td> 198 </tr> 199 <tr> 200 <td class="table_color b">总计</td> 201 <td class="table_color b">1000</td> 202 <td class="table_color b"> </td> 203 </tr> 204 </table> 205 </div> 206 </div> 207 208 </div> 209 <div class="footer"> 210 <p>版权所有©</p> 211 </div> 212 </body> 213 </html>
View Code1 /*清除默认格式*/ 2 body,form,fieldset,table,td,img,div,input,p,ul{padding: 0;margin: 0;} 3 body{font-size: 14px;} 4 img{border: none;} 5 a{text-decoration: none;} 6 input,select,textarea{outline: none;} 7 textarea{resize: none;} 8 /*清浮动*/ 9 .clearfix:after{content: "";display: block;clear: both;} 10 .clearfix{ 11 overflow:auto; 12 zoom: 1; //ie6兼容解决办法 13 }
View Code1 /*清除padding内边距影响盒子宽度*/ 2 * { 3 -webkit-box-sizing: border-box; 4 -moz-box-sizing: border-box; 5 box-sizing: border-box; 6 } 7 .fl{ 8 float: left; 9 } 10 .fr{ 11 float: right; 12 } 13 body{ 14 background: #DEDEDE; 15 } 16 .container{ 17 margin:0 20px; 18 overflow: auto; 19 zoom: 1; 20 min-width: 570px; 21 } 22 23 .passage-first,.passage-second,.images,.passage-last{ 24 background: #fff; 25 padding: 20px; 26 margin-top: 20px; 27 min-width: 190px; 28 } 29 .passage-first p,.passage-second p{ 30 margin: 10px 0; 31 } 32 .left{ 33 margin-right: 380px; 34 } 35 36 37 /*header部分*/ 38 .header{ 39 min-width: 700px; /*解决ul跑到header外面的问题*/ 40 background: #333; 41 height: 60px; /*需注意，若没有设置高度，则布局乱*/ 42 } 43 .nav li{ 44 float: left; 45 width: 80px; 46 47 } 48 .nav a{ 49 display: inline-block; 50 text-align: center; 51 height: 60px; 52 line-height: 60px; 53 color: #fff; 54 } 55 56 /*passage-first以及passage-second部分*/ 57 .t-gray{ 58 color: #999; 59 } 60 /*设置图片的大小必须双管齐下 61 * 此时图片的大小会随着父容器大小的变化而变化 62 */ 63 .isb-img img{ 64 width: 70%; 65 height: 40%; 66 } 67 .passage-second li{ 68 list-style: none; 69 } 70 /*images部分*/ 71 .images{ 72 overflow: auto; 73 zoom: 1; 74 } 75 .iss-img{ 76 width: 122px; 77 height: 126px; 78 border: solid #999 1px; 79 margin: 20px 20px; 80 float: left; 81 82 } 83 .iss-img img{ 84 width: 100px; 85 height: 80px; 86 margin: 10px 10px 10px 10px; 87 88 } 89 .describe-img{ 90 height: 23px; 91 text-align: center; 92 line-height: 30px; 93 } 94 /*passage-last部分*/ 95 .is-table{ 96 border-collapse: collapse; 97 width: 100%; 98 } 99 100 .is-table td{ 101 border: solid 1px #999; 102 padding: 4px; 103 } 104 .is-table th{ 105 padding: 4px; 106 border: solid 1px #999; 107 background: #000; 108 color: #fff; 109 } 110 .b{ 111 font-weight: 800; 112 } 113 .table_color{ 114 background: #999999; 115 } 116 /*sidebar部分*/ 117 .sideBar{ 118 width: 350px; 119 background: #fff; 120 padding: 20px; 121 margin-top: 20px; 122 } 123 .sideBar td{ 124 padding: 4px; 125 } 126 .button{ 127 background: #3355D0; 128 color: #fff; 129 width: 310px ; 130 height: 40px; 131 font-size: 14px; 132 } 133 .imformation{ 134 height: 60px; 135 } 136 /*footer部分*/ 137 .footer{ 138 background: #000; 139 height: 70px; 140 color: #fff; 141 margin-top: 20px; 142 min-width: 700px; 143 } 144 .footer p{ 145 text-align: center; 146 line-height: 70px; 147 font-size: 14px; 148 }
实现二列式布局
1、如果是分两列布局，可以同时对两个盒子应用浮动来进行布局，可以设定左右两个盒子自己的宽度或者是宽度百分比。
2、第二种形式的分两列布局，可以对左边的盒子应用左浮动布局，对右边的盒子应用定位或者设置它的margin值来定位，并配合min-width和max-width使最基本的形态不发生改变。
