<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. 《Programming WPF》翻译 第7章 5.可视化层编程

    原文:<Programming WPF>翻译 第7章 5.可视化层编程 形状元素能提供一种便利的方式与图形一起工作,在一些情形中,添加表示绘图的元素到UI树中,可能是比它的价值更加麻烦.你 ...

  2. C/C++四种退出线程的方法

    退出线程可以有四种方法: 1.线程函数的return返回(最好这样): 其中用线程函数的return返回, 而终止线程是最安全的, 在线程函数return返回后, 会清理函数内申请的类对象, 即调用这 ...

  3. 3Sum Closest 解答

    Question Given an array S of n integers, find three integers in S such that the sum is closest to a ...

  4. Palindrome Linked List 解答

    Question Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O ...

  5. 基于微信公众平台的开发（清华大学第二讲）_Alien的笔记

    基于微信公众平台的开发(清华大学第二讲)_Alien的笔记 基于微信公众平台的开发(清华大学第二讲)

  6. Android控件TextView的实现原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8636153 在前面一个系列的文章中,我们以窗口 ...

  7. [转]IDENT_CURRENT、SCOPE_IDENTITY、@@IDENTITY 差異對照表

    本文转自:http://www.dotblogs.com.tw/hunterpo/archive/2009/09/04/10421.aspx IDENT_CURRENT.SCOPE_IDENTITY ...

  8. EffectiveC#7--选择恒定的原子值类型数据

    1.恒定类型就是一但它们被创建,它们(的值)就是固定的. 恒定类型可以很好的在基于哈希代码的集合上工作.以Object.GetHashCode()方法返回的值,对同一个实例是必须相同的 2.一个客户类 ...

  9. 关于.net 对.manifest清单文件查找缓存的猜想

    问题背景: winform调用unity web player 插件. 按如下操作: ,编译后会生成.manifest清单文件: 通过清单内容可以看出程序在运行时是按照以上信息来查找ActiveX控件 ...

  10. js如何关闭当前页，而不弹出提示框

    //关闭当前页面,并且打开新页面,(不提示) function closeWinAndOpen(url) { //利用随机数处理WinName var sWinName = "LR" ...