前言

  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:  auto;height:300px;background-color:#e6686a;}
    
.foot{margin:  auto;background-color:red;}
  • 效果图如下：

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:; padding:; font-size:20px; font-weight:bold}
    
div{ text-align:center; line-height:50px}
    
.main{ width:%; height:400px; margin: auto}
    
.left{ width:%; height:400px; background:#e6686a; float:left}
    
.right{ width:%; height:400px; background:#fae1e1; float:right}

  • 效果图如下：

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:; padding:; font-weight:bold}
    
div{ line-height:40px}
    
.left{height:400px; width:200px; position: absolute; left:; top:;background:#fae1e1;}
    
.right{ height:400px; width:200px; position:absolute; top:;right:;; background:#fae1e1}
    
.center{ height:400px; margin: 200px; background:#e6686a}
  • 效果图如下：

CSS多列布局（实例）的更多相关文章

  1. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  2. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  3. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  5. div+css网页标准布局实例教程（二）

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  6. html5 css多列布局

    p{    text-indent: 2em;    line-height: 2em;}h4{    -webkit-column-span:all;    background: green;   ...

  7. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  8. CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

    新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...

  9. CSS多列布局（栅格布局）

    一.多列布局 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 代码如下(具体的解释也在代码中)浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webk ...

随机推荐

  1. Python3：numpy模块中的argsort()函数

    Python3:numpy模块中的argsort()函数   argsort函数是Numpy模块中的函数: >>> import numpy >>> help(nu ...

  2. 洛谷——P1572 计算分数

    P1572 计算分数 模拟+字符串 注意有两位数的情况以及负数情况 #include<bits/stdc++.h> using namespace std; string s; ],b[] ...

  3. Luogu P2922 秘密消息

    原题 P2922 [USACO08DEC]秘密消息Secret Message 题目描述 Bessie is leading the cows in an attempt to escape! To ...

  4. [luogu4054 JSOI2009] 计数问题(2D BIT)

    传送门 Solution 2D BIT模板 Code //By Menteur_Hxy #include <cmath> #include <cstdio> #include ...

  5. Linux下的find命令

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.即使系统中含有网络文件系统,find命令在该文件系统中同样有效.在运行一个非 ...

  6. i++与++i的区别及效率

    i++与++i的区别及效率   先看看基本区别:i++ :先在i所在的表达式中使用i的当前值,后让i加1++i :让i先加1,然后在i所在的表达式中使用i的新值 看一些视频教程里面写for循环的时候都 ...

  7. BZOJ 1641 USACO 2007 Nov. Cow Hurdles 奶牛跨栏

    [题解] 弗洛伊德.更新距离的时候把$f[i][j]=min(f[i][j],f[i][k]+f[k][j])$改为$f[i][j]=min(f[i][j],max(f[i][k],f[k][j])) ...

  8. JavaSE 学习笔记之多态（七）

    多 态:函数本身就具备多态性,某一种事物有不同的具体的体现. 体现:父类引用或者接口的引用指向了自己的子类对象.//Animal a = new Cat(); 多态的好处:提高了程序的扩展性. 多态的 ...

  9. Fedora15下安装Android开发环境

    Fedora15下安装Android开发环境需要以下步骤: 完整步骤. 1. 安装正确版本的JDK. 2. 安装Eclipse. 3.  安装ADT. 4.  安装Android SDK. 5.  安 ...

  10. Java 和JS Base64加密

    项目在登录.注册等场景实现时,经常会用到用户信息前端加密,然后项目后端二次解密,避免信息直接在浏览器上以明文显示. 本文主要介绍了base64加密的方式处理代码,不支持中文 源码如下: base64. ...