<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. ajax 调用后台接口示例

    $(function(){ var _del_time_list = $("select[name='del_time_list']"); var _del_table_name ...

  2. Gym 100570E : Palindrome Query

    De Prezer loves palindrome strings. A string s1s2...sn is palindrome if and only if it is equal to i ...

  3. Android实现Live Photos 加源代码

    在Android手机上实现类似于iphone中的LivePhoto的功能 源代码分享 github:https://github.com/amazingyyc/DeepRed 代码说明: 1.改变视频 ...

  4. 沙湖王 | 用Scipy实现K-means聚类算法

    沙湖王 | 用Scipy实现K-means聚类算法 用Scipy实现K-means聚类算法

  5. mysql的日志

    是否启用了日志mysql>show variables like ‘log_bin’; 怎样知道当前的日志mysql> show master status; 看二进制日志文件用mysql ...

  6. hdu 5429 Geometric Progression（存个大数模板）

    Problem Description Determine whether a sequence is a Geometric progression or not. In mathematics, ...

  7. Linux UGO和ACL权限管理

    自主访问控制(Discretionary Access Control, DAC)是指对象(比如程序.文件.进程)的拥有者可以任意修改或者授予此对象相应的权限.Linux的UGO(User, Grou ...

  8. NET中级课--浅谈委托，事件，异步调用，回调等概念

    直接说题. 委托         首先明确它是什么,其实就是一个类,定义一个委托即定义一个类,那么它是什么类?用来说明方法的类型的类.字段有类型,那么方法其实也有类型,就是委托.       委托是某 ...

  9. html5前端开发笔记-个人中心

    简单的css自适应 PC端 *** 移动端 *** ) *** 一开始的想法就是模仿手机APP 的页面进行布局,首先得有个头部,然后是主题部分,然后加上2个按钮,分别是编辑和退出登录.先布出基本结构. ...

  10. access数据库的连接字符串以及数据库操作类

    <!--access数据库连接方式--> <add name="QYTangConnectionString" connectionString="Pr ...