<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. 开心菜鸟系列－－－－变量的解读（javascript入门篇）

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  2. jQuery对象与DOM对象的互相转换

    jQuery对象转换成DOM对象jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index).1.jQuery对象是一个数组对象,可以通过[index]的方 ...

  3. 无法在People Picker中选择用户

    问题: 通过备份还原的方式(*.bak或者ContentDB备份还原)将某个网站集迁移到新的环境,无法在这个网站集中的任何站点选择用户,但是可以在其它网站集和管理中心选择用户. 我的环境是:Share ...

  4. 导入Excel表格到SharePoint站点

    在Excel中创建表 选中所有要导入的行,点击菜单"插入"->"表格" 如果数据内容包含表头,选择"我的表格包含表头".   选择菜单 ...

  5. thinkpad t530 centos 6.4 有线网卡 设置

    由于新装的系统没有安装网卡驱动,各大厂商的标准又不一样,有的电脑在linux下不用安装无线网卡驱动,而很不幸,我的电脑是ret的网卡,只能自行安装,在安装无线网卡的过程中使用到了chkconfig的命 ...

  6. 【剑指offer】面试题27：二叉搜索树与双向链表

    题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 思路: 假设已经处理了一部分(转换了左子树),则得到一个有序的双向链表,现在 ...

  7. Find Median from Data Stream 解答

    Question Median is the middle value in an ordered integer list. If the size of the list is even, the ...

  8. win10无法使用内置管理员账户打开

    对于这种问题其实对于专业版用户倒不是难事,很容易解决,具体方法如下: 首先WIN+R输入:gpedit.msc,打开组策略,找到“计算机配置”里面的“Windows设置”,打开“安全设置” -> ...

  9. CharacterController 角色控制器实现移动和跳跃

    之前我使用SimpleMove来控制角色的移动, 后来又想实现人物的跳跃, 看见圣典里面是使用Move来实现的. =.= 然后我都把他们改成move来实现了 代码实现: using UnityEngi ...

  10. deciaml(十进制浮点运算)

    # -*- coding: utf-8 -*- # ==================== #File: python #Author: python #Date: 2014 #========== ...