<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高德地图自定义Markers的例子

    下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...

  2. C语言开发CGI程序的简单例子

    这年头用C语言开发cgi的已经不多,大多数的web程序都使用java.php.python等这些语言了. 但是本文将做一些简单的cgi实例. 首先配置环境 #这里是使用的apache AddHandl ...

  3. 2 _RESETFUL介绍

    2.2 CURL 命令的讲解: 1.就是以命令的方式来执行HTTP 协议的请求的工具 2.可以通过CURL 操作HTTP的GET/POST/PUT/DELETE方法 jrhmpt01:/root# c ...

  4. 【转】repo 的一些用法和理解-不错

    原文网址:http://blog.csdn.net/yasin_lee/article/details/5975068 repo的用法(zz) 注:repo只是google用Python脚本写的调用g ...

  5. POJ1664(简单动态规划)

    #include<iostream> #include<string> #include<cstring> using namespace std; ][]; vo ...

  6. python高级编程之（类级）：子类内建类型

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #类级 #在2.2中,提出了类型(type0与类(class)统一( ...

  7. pyqt 托盘例子学习

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.QtGui import * from PyQ ...

  8. NTP配置实践

    前言 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.不管是平时使用的私人计算机还是在工作中搭建的服务器集群.时间的统一性和准确性是十分 ...

  9. 利用PHPExcel转Excel柱形图

    这在附还有一个转柱形图的效果及代码. 原PHP报表效果: 转成Excel后的效果: 附上代码: <? php /** * PHPExcel * * Copyright (C) 2006 - 20 ...

  10. 30款基本UX工具 - 思维流程工具 & 原型工具

    来源:GBin1.com 现在的开发人员在建造网站时,注重的是布局和技术特性,但是往往忽略了更重要的一点,那就是用户体验. 如 果用户在使用的时候,不能简单清楚的知道该要如何操作,那么他们一定会选择另 ...