前言

  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. HTML的基本操作学习----常用标签，特殊符号，列表，表格，表单

    什么是HTML 常用标签 标题标签 段落标签 粗体标签+斜体 超链接标签 图片标签 列表标签 无序标签 有序标签 自定义列表 div标签 特殊符号 表格 表单 HTML 什么是 HTML?   HTM ...

  2. 【Codeforces Global Round 1 E】Magic Stones

    [链接] 我是链接,点我呀:) [题意] 你可以把c[i]改成c[i+1]+c[i-1]-c[i] (2<=i<=n-1) 问你能不能把每一个c[i]都换成对应的t[i]; [题解] d[ ...

  3. HBase(0.96)新的Java API操作

    package test; import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.ap ...

  4. href=#与 href=javascript:void(0) 的区别

    <a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" ...

  5. django book chapter 2

    Django’s optional GIS (Geographic Information Systems) support requires Python 2.5 to 2.7. 这里提到了djan ...

  6. CCEditBox/CCEditBoxImplMac

    #ifndef __CCEditBoxIMPLMAC_H__ #define __CCEditBoxIMPLMAC_H__ #include "cocos2d.h" #if (CC ...

  7. 【树状数组】POJ 2155 Matrix

    附一篇经典翻译,学习 树状数组  http://www.hawstein.com/posts/binary-indexed-trees.html /** * @author johnsondu * @ ...

  8. Struts2—Action

    二.命名空间namespace ·命名空间namespace须要放在相应的package下 ·Namespace必须以"/开头". ·Result的name是"succe ...

  9. Oracle VM VirtualBox使用的注意事项

    Oracle VM VirtualBox使用的注意事项 Oracle VM VirtualBox 上克隆虚拟机 方法一 1.复制源虚拟里的 vdi 文件到新的目录 2.命令行进入 Oracle VM  ...

  10. 虚函数的特点就是执行的时候会下降到子类去执行同名覆盖函数 good

    var t: TBitBtn;begin t:=TBitBtn.Create(nil); t.Name:='BitBtn100'; t.parent :=Self; // 这里下断点end; 一路跟踪 ...