前言

  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. 洛谷——P1572 计算分数

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

  2. vue 微信授权解决方案

    背景 前后端分离项目 - SpringSocial 绑定与解绑社交账号如微信.QQ2018-08-14更新时隔四个月第一次更新,因为项目重构有一次接触到了微信授权,思路已经比原来清晰的多了,将重新修改 ...

  3. PAT 1111 Online Map

    Input our current position and a destination, an online map can recommend several paths. Now your jo ...

  4. 8.2.3 操作MySQL数据库

    Python访问MySQL数据库可以使用MySQLDb模块,该模块主要方法如下: (1)commit():提交事务. (2)rollback():回滚事务. (3)callproc(self,proc ...

  5. WEB 移动端 CSS3动画性能 优化

    很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用CSS3动画,但是很多时候在安卓机下,动画明显会出现卡顿,很难看,那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显 ...

  6. Divisible Group Sums

    Divisible Group Sums Given a list of N numbers you will be allowed to choose any M of them. So you c ...

  7. Istio是啥？一文带你彻底了解！

    原标题:Istio是啥?一文带你彻底了解! " 如果你比较关注新兴技术的话,那么很可能在不同的地方听说过 Istio,并且知道它和 Service Mesh 有着牵扯. 这篇文章可以作为了解 ...

  8. nyoj_283_对称排序_201312051155

    对称排序 时间限制:1000 ms  |           内存限制:65535 KB 难度:1   描述 In your job at Albatross Circus Management (y ...

  9. 寒城攻略：Listo 教你用 Swift 写IOS UI 项目计算器

    之前总结过 Swift 的语言攻略,这里就不做赘述了,如今做一个实例计算器项目来介绍一下 Swift 的应用.(凝视已经全然.直接上代码) 先看一下效果图: 以下是详细的代码和解释: 分享快乐.开源中 ...

  10. STL源代码剖析 容器 stl_stack.h

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie stack ---------------------------------------- ...