前言

  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. redis数据库学习笔记

    redis数据库 工作需要,简单了解一下redis数据库,供后续参考和复习使用. 一.简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字 ...

  2. B树、B+树

    when ? why ? how ? what ? 平衡二叉树其查找的时间复杂度是 O(log2N)与树的深度相关,那么降低树的深度自然会提高查找效率. 如果我们要操作的数据集非常大,大到内存已经没法 ...

  3. 从CSV文件中读取jpg图片的URL地址并多线程批量下载

    很多时候,我们的网站上传图片时并没有根据内容进行文件夹分类,甚至会直接存储到阿里云的OSS或是七牛云等云存储上.这样,当我们需要打包图片时,就需要从数据库找寻分类图片,通过CURL进行下载.我最近刚刚 ...

  4. JDK,JRE,JVM三者关系

    已上图,如有疏漏错误请在下面评论区指出,感激不尽!

  5. Ubuntu镜像包版本差异

    自接触Linux以来,一直使用ubuntu,下载ubuntu镜像的过程中,一个问题一直困扰我--desktop版镜像和server版镜像究竟有什么区别?难道就GUI有无的区别? 今天尝试解答这个问题. ...

  6. CodeForces - 284C - Cows and Sequence

    先上题目: C. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  7. Hadoop2.2.0 注意事项

    1.启动前必须把防火墙关了,要不然会导致nodemanager启动不了. 关闭防火墙:service iptables stop 永久关闭(重启后默认关闭):chkconfig iptables of ...

  8. 配置sublime text 前端环境

    SublimeLinter是Sublime的一个代码检测工具插件.安装前台是配置好node环境 1,在sublime text安装 SublimeLinter 按下 Ctrl+Shift+p 进入 C ...

  9. 开源GIS软件 4

    空间数据操作框架 Apache SIS Apache SIS 是一个空间的框架,可以更好地搜索,数据聚类,归档,或任何其他相关的空间坐标表示的需要. kvwmap kvwmap是一个采用PHP开发的W ...

  10. spring mvc源码-》MultipartReques类-》主要是对文件上传进行的处理，在上传文件时，编码格式为enctype="multipart/form-data"格式，以二进制形式提交数据，提交方式为post方式。

    spring mvc源码->MultipartReques类-> MultipartReques类主要是对文件上传进行的处理,在上传文件时,编码格式为enctype="multi ...