<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        #wrap

        {

            overflow: hidden;

            width: 1000px;

            margin: 0 auto;

        }

        #left, #center, #right

        {

            margin-bottom: -10000px;

            padding-bottom: 10000px;

        }

        #left

        {

            float: left;

            width: 250px;

            background: #00FFFF;

        }

        #center

        {

            float: left;

            width: 500px;

            background: #FF0000;

        }

        #right

        {

            float: right;

            width: 250px;

            background: #00FF00;

        }

    </style>

</head>

<body>

    <div id="wrap">

        <div id="left">

            <p>

                left</p>

            <p>

                left</p>

            <p>

                left</p>

            <p>

                left</p>

            <p>

                left</p>

        </div>

        <div id="center">

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

            <p>

                center</p>

        </div>

        <div id="right">

            <p>

                right</p>

            <p>

                right</p>

            <p>

                right</p>

        </div>

    </div>

</body>

</html>

纯CSS实现三列DIV等高布局的更多相关文章

  1. 纯CSS实现三列布局(两边固定，中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...

  2. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  4. HTML5+CSS实现三列布局自适应

    利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...

  5. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  6. CSS 经典三列布局

    一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...

  7. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  8. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  9. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

随机推荐

  1. BZOJ 1036 [ZJOI2008]树的统计Count（动态树）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1036 题意:一棵树,每个节点有一个权值.三种操作:(1)修改某个节点的权值:(2)输出某两 ...

  2. bzoj1753 [Usaco2005 qua]Who's in the Middle

    Description FJ is surveying his herd to find the most average cow. He wants to know how much milk th ...

  3. tcpdump详细用法

    1.1 三种关键字     关于类型的关键字     第一种是关于类型的关键字,主要包括host,net,port, 例如 host 210.27.48.2,指明 210.27.48.2是一台主机,n ...

  4. 在CDHtmlDialog中处理WindowClosing

    要截获window.close(),就得截获CDHtmlDialog的WindowClosing.以下是示例代码: // header DECLARE_EVENTSINK_MAP() void Win ...

  5. 【HDU1166】敌兵布阵（树状数组或线段树）

    是一道树状数组的裸题,也可以说是线段树的对于单点维护的裸题.多做这种题目可以提高自己对基础知识的理解程度,很经典. #include <iostream> #include <cst ...

  6. IO-APIC

    MP-BIOS bug :8254 timer not connected to IO-APIC解决办法 云计算中在基于一个template image instance vmServer时出现上述的 ...

  7. php5.3 appache phpstudy win7win8win10下 运行速度慢

    php5.3 appache phpstudy win7win8win10下 运行速度慢 最近在部署服务器以及本地测试的时候发现了一个奇怪的现象,运行PHP程序的时候非常慢,起先以为是网速的原因,后经 ...

  8. Unity 白猫操作小实例

    最近师兄找我说白猫的操作如何做,  0.0 结果白猫没有android的客户端玩不了,看了下视频介绍就简单做了下 效果图:   核心代码: using UnityEngine; using Syste ...

  9. cocos2d-x 3.0rc开发指南：Windows下Android环境搭建

    安装工具 1. 配置JDK JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 本人的系统是Win7 ...

  10. freemarker书写select组件错误摘要（七）

    1.错误叙述性说明 六月 26, 2014 11:26:27 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template p ...