<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. 单片机C 语言与汇编语言混合编程

    在单片机应用系统设计中,过去主要采用汇编语言开发程序. 汇编语言编写的程序对单片机硬件操作很方便,编写的程序代码短,效率高,但系统设计的周期长,可读性和可移植性都很差.C语言程序开发是近年来单片机系统 ...

  2. Jquery局部打印插件

    局部打印插件 jquery.PrintArea.js js代码 (function ($) {     var printAreaCount = 0;     $.fn.printArea = fun ...

  3. 基于Android的物理类游戏，源代码(JAVA)分享

    游戏视频DEMO:http://v.youku.com/v_show/id_XNTM5MzM1Mzg0.html?from=s1.8-1-1.2 说明:一个自己做的Android上的物理类游戏,物理引 ...

  4. 构建高性能WEB站点笔记二

    构建高性能WEB站点笔记 因为是跳着看的,后面看到有提到啥epoll模型,那就补充下前面的知识. 第三章 服务器并发处理能力 3.2 CPU并发计算 进程 好处:cpu 时间的轮流使用.对CPU计算和 ...

  5. Linux 计算器

    bc: 默认没有小数位,使用scale=2设置保留的位数.

  6. 【转】DM8168图像处理Link

    1> dei dei 主要做数据交错处理,带缩放 dei control data flow: 2> sclr 8168中支持缩放按比例的分子和分母,只支持缩小,貌似不支持放大,且注意输出 ...

  7. Angular学习笔记(2)——TODO小应用

    Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...

  8. Uninstall or Disable Java on a Mac

    You can run Java apps in two ways. The first is to run Java applets inside your Web browser with a p ...

  9. VirtualBox 扩展包卸载或安装失败(VERR_ALREADY_EXISTS)

    最近在卸载VirtualBox出现了无法卸载的错误.提示为Failed to install the extension. The installer failed with exit code 1: ...

  10. Log4net 列

    配置 <configuration> <configSections> <section name="log4net" type="Syst ...