<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. android run process

    http://www.jb51.net/article/32798.htm http://www.elecfans.com/tongxin/119/20120315263977.html 图 1 详细 ...

  2. AltiumDesignerSummer9Build9.3.1.19182破解图文教程

    一.下载 AltiumDesignerSummer9Build9.3.1.19182 下载地址 http://www.verycd.com/topics/2769819/ 二.安装 一路确定啥的傻瓜式 ...

  3. csdn的下载链接token

    qt之QComboBox定制 http://www.cnblogs.com/swarmbees/p/5710714.html http://download.csdn.net/detail/qq_30 ...

  4. Xs and Os Referee

    Xs and Os Referee 1 def checkio(game_result): 2 winner = 'D' 3 4 for row in game_result: 5 if row[0] ...

  5. java设计模式--结构型模式--装饰模式

    装饰模式 概述 动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 适用性 1.在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责. 2.处理 ...

  6. 关于C++中覆盖，重载，隐藏的一点说明

    C++覆盖 重载 隐藏是三个经常容易混淆的概念 这里我们简单总结下: 1.重载的条件(编译时多态) a.同一个类中 b.函数名相同,参数不同(返回值不能作为重载的条件) c.与函数是否为虚函数无关 2 ...

  7. Android图形合成和显示系统---基于高通MSM8k MDP4平台

    介绍了Android SurfaceFlinger层次以下的图形合成和显示系统,主要基于高通MSM8k MDP4x平台. 做为Android Display专题.SurfaceFlinger的详细介绍 ...

  8. 【转】网络视频监控P2P解决方案

    一．摘要 本文分析了日益增长的民用级别家庭和个人网络视频监控市场的需求特点,并给出了一种经济可行易于大规模部署的P2P解决方案. 由于篇幅有限,本文只给出了方案的思路,未对更深入的技术细节做详细的论述 ...

  9. python高级编程之访问超类中的方法:super()

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #超类01 #它是一个内建类型,用于访问属于某个对象超类特性 pri ...

  10. POJ3260:The Fewest Coins(混合背包)

    Description Farmer John has gone to town to buy some farm supplies. Being a very efficient man, he a ...