欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css多列布局（实例）

程序员文章站 2022-07-05 16:52:02
前言 1 一列布局 一列布局： HTML部分 一列布局
head

前言

  1. 一列布局
  2. 二列布局
  3. 三列布局

 

1 一列布局

  • 一列布局： 
    HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一列布局</title>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="foot">foot</div>
</body>
</html>


CSS部分
div{text-align: center;}
.head{height: 60px;background-color:#fae1e1;}
.main{margin: 0 auto;height:300px;background-color:#e6686a;}
.foot{margin: 0 auto;background-color:red;}

     

  • 效果图如下：

    css多列布局（实例）

 

2 二列布局

  • 二列布局代码如下（即左右布局），二列布局有多种方法，float+margin（一侧定宽，一侧自动）、position+margin（一侧定宽，一侧自动）、float+负margin（一侧定宽，一侧自动）等，本篇用的是设定两栏的宽度的百分比，随宽度自适应变化代码如下： 
    HTML部分
<!DOCTYPE html>
<html>
<head>
<title>二列布局</title>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html

CSS部分
body{ margin:0; padding:0; font-size:20px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:80%; height:400px; margin:0 auto}
.left{ width:20%; height:400px; background:#e6686a; float:left}
.right{ width:80%; height:400px; background:#fae1e1; float:right}

     

  • 效果图如下：

    css多列布局（实例）

 

3 三列布局

  • 三列布局（即左中右布局），三列布局有多种方法，float+margin（两侧定宽，中间自适应）、position+margin（两侧定宽，中间自适应）、float+负margin（两侧定宽，中间自适应）、float+position+margin（两侧自动，中间定宽）、position+margin（两侧自动，中间定宽），本篇用的是float+margin（两侧定宽，中间自适应），代码如下：
    HTML部分
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="left">left</div>
<div class="center">main</div>
<div class="right">right</div>
</body>
</html>

CSS部分
body{ margin:0; padding:0; font-weight:bold}
div{ line-height:40px}
.left{height:400px; width:200px; position: absolute; left:0; top:0;background:#fae1e1;}
.right{ height:400px; width:200px; position:absolute; top:0;right:0;; background:#fae1e1}
.center{ height:400px; margin:0 200px; background:#e6686a}

     

  • 效果图如下：

    css多列布局（实例）

上一篇： 三国之中有哪些人不怕吕布？除了张飞还有五个！

下一篇： 司马懿为什么熬到了70多才*？司马懿在等什么？

推荐阅读