search

博客列表 >使用浮动与定位实现经典三列布局

使用浮动与定位实现经典三列布局

BigPig
BigPig原创
2020年06月22日 01:35:46987浏览

使用浮动与定位实现经典三列布局

一些代码解释我会写在代码的注释中，不会继续在代码外作过多的解释，请注意代码中的注释！

使用浮动完成

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 初始化所有样式 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         /* 先为页眉与页脚设置宽高背景颜色与外间距 */
  17.         .header,
  18.         .footer {
  19.             height: 30px;
  20.             background-color: powderblue;
  21.             width: 100%;
  22.             margin: auto;
  23.         }
  25.         /* 给中间主体区域创建一个容器包裹起来预防高度坍塌 */
  26.         /* 这里的min-height指的是最小高度 */
  27.         .container {
  28.             width: 1000px;
  29.             min-height: 600px;
  30.             margin: 10px auto;
  31.             overflow: auto;
  32.         }
  34.         /* 为主体的左侧设置样式，并且向左漂浮 */
  35.         .container>.left {
  36.             width: 200px;
  37.             min-height: 600px;
  38.             background-color: skyblue;
  39.             float: left;
  40.         }
  42.         /* 为主体的右侧设置向右漂浮与样式 */
  43.         .container>.right {
  44.             width: 200px;
  45.             min-height: 600px;
  46.             background-color: skyblue;
  47.             float: right;
  48.         }
  50.         /* 为中间的内容区设置漂浮，向左向右其实都行，但是要记住，需要计算好主体区的宽度，要把padding也给算进去，否则会把布局弄乱。三列布局的主体区域除特殊情况外无法设置自适应与最小宽度，否则会自动铺满页面，也就是宽等于百分百 。为了美观在为其添加左右外间距*/
  51.         .container>.conter {
  52.             float: left;
  53.             width: 580px;
  54.             min-height: 600px;
  55.             margin: 0 10px;
  56.             background-color: springgreen;
  57.         }
  58.     </style>
  59. </head>
  61. <body>
  62.     <!-- 一列眉，一列主体，一列页脚。主体中分为左侧，右侧与中间的内容区。 -->
  63.     <!-- 这里是页眉 -->
  64.     <div class="header"></div>
  65.     <!-- 主体 -->
  66.     <div class="container">
  67.         <div class="left"></div>
  68.         <div class="conter"></div>
  69.         <div class="right"></div>
  70.     </div>
  71.     <!-- 页脚 -->
  72.     <div class="footer"></div>
  73.     </div>
  74. </body>
  76. </html>

效果如如下：

使用绝对定位来完成经典三列布局

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 初始化所有样式 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         .header,
  17.         .footer {
  18.             height: 30px;
  19.             background-color: powderblue;
  20.             width: 100%;
  21.             margin: auto;
  22.         }
  24.         /* 首先添加定位父级 */
  25.         .container {
  26.             width: 1000px;
  27.             min-height: 600px;
  28.             margin: 10px auto;
  29.             position: relative;
  30.         }
  32.         /* 为左侧的区域添加绝对定位，并且设置距离左和上的间距设置为0将其固定在左侧 */
  33.         .container>.left {
  34.             width: 200px;
  35.             min-height: 600px;
  36.             background-color: skyblue;
  37.             position: absolute;
  38.             left: 0;
  39.             top: 0;
  40.         }
  42.         /* 为右侧的区域添加绝对定位，并且设置距离右和上的间距设置为0将其固定在右侧 */
  43.         .container>.right {
  44.             width: 200px;
  45.             min-height: 600px;
  46.             background-color: skyblue;
  47.             position: absolute;
  48.             right: 0;
  49.             top: 0;
  50.         }
  52.         /* 将中间的内容区设置一个绝对定位，因为左侧的区域的宽度为200px；为了显示到中央所以我们的left不能设置为0，将left设置为200px，top还是为0。内容区将会居中 */
  53.         .container>.conter {
  54.             width: 580px;
  55.             min-height: 600px;
  56.             margin: 0 10px;
  57.             background-color: springgreen;
  58.             position: absolute;
  59.             top: 0;
  60.             left: 200px;
  61.         }
  62.     </style>
  63. </head>
  65. <body>
  66.     <!-- 一列眉，一列主体，一列页脚。主体中分为左侧，右侧与中间的内容区。 -->
  67.     <!-- 这里是页眉 -->
  68.     <div class="header"></div>
  69.     <!-- 主体 -->
  70.     <div class="container">
  71.         <div class="left"></div>
  72.         <div class="conter"></div>
  73.         <div class="right"></div>
  74.     </div>
  75.     <!-- 页脚 -->
  76.     <div class="footer"></div>
  77.     </div>
  78. </body>
  80. </html>

效果图如下

以上就是使用漂浮与绝对定位来完成经典三列布局的所有代码与解释！

上一条：通用后台管理系统下一条：前端背景控制的常用属性和精灵图及阿里字体图标的实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多