前言

  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. Lua练习题集嚢

    --1.table.sort() am = {"cc","nn","ll","dd"} arr = function ( ...

  2. CodeForces 580B（尺取法）

    Kefa and Company 题意:Kefa这个人要去吃饭,他要邀请一些朋友一起去,他的每个朋友有两个属性金钱和关系度,要求邀请的人里边任意两个人之间的金钱差的绝对值不大于d:求被邀请的所有朋友的 ...

  3. Linux之内核管理及故障排错

    一.Centos6启动流程: 加电自检PSOT 引导加载器BootLoader MBR(GRUB第一阶段)||(GRUB第1.5阶段)(GRUB第2阶段) 加载内核(vmlinuz.initramfs ...

  4. linux下root用户和tarena用户vimrc配置

    设置vim自动缩进,行号,tab键宽度 如果是root超级用户,他的主目录是: /root ,打开文件vim的配置文件.vimrc 如果是tarena用户,他的主目录是:/home/tarena 打开 ...

  5. linux下的vi的使用方法

    vi的使用: 一般指令模式: vi打开一个文件就直接进入一般指令模式,可以进行删除.复制.粘贴.但是不可以对文件的内容进行修改. 常用命令: ctrl + f 向下移动一页 ctrl + b 向上移动 ...

  6. django的时间问题

    三个时间datetime.datetime.now().datetime.datetime.utcnow()与django.util.timezone.now()的区别 datetime.dateti ...

  7. hdu 5652

    India and China Origins Time Limit: 2000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  8. 【codeforces 527C】Glass Carving

    [题目链接]:http://codeforces.com/contest/527/problem/C [题意] 让你切割一个长方形; 只能横切或竖切; 让你实时输出切完之后最大的长方形的面积; [题解 ...

  9. maven出现不再支持源选项 1.5。请使用 1.6 或更高版本

    maven出现不再支持源选项 1.5.请使用 1.6 或更高版本 学习了:http://blog.csdn.net/sosous/article/details/78312867 错误: [ERROR ...

  10. ios调用dismissViewController的一个小陷阱

    我们的APP从启动到进入主页面.是通过presentViewController构造了一个ViewController序列,类似于首页 -> 登陆页 -> 启动载入页 -> 主页面 ...