Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用浮动与定位实现经典三列布局
Blogger Information
Blog 8
fans 1
comment 0
visits 8855
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用浮动与定位实现经典三列布局
BigPig
Original
988 people have browsed it

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

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

使用浮动完成

代码如下：

  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>

效果图如下

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

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很不错，很认真，继续加油！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post