如下图：

需求：

1. 如图

2. 可以从任意div标签开始。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style>

         #content {

             overflow: hidden;

         }

         .column-left {

             float: left;

             width: 200px;

             min-height: 500px;

         }

         .column-right {

             margin-left: 220px;

             min-height: 500px;

         }

         .columns3 {

             overflow: hidden;

         }

         .columns3 > div {

             width: 33.33333%;

             float: left;

         }

             .columns3 .column-content {

                 margin-right: 20px;

                 min-height: 300px;

                 background-color: greenyellow;

             }

     </style>

 </head>

 <body>

     <div id="header" style="height: 50px; background: blue;">

     </div>

     <div id="content">

         <div class="column-left" style="background-color: yellow;">

         </div>

         <div class="column-right">

             <div class="columns3">

                 <div>

                     <div class="column-content"></div>

                 </div>

                 <div>

                     <div class="column-content"></div>

                 </div>

                 <div>

                     <div class="column-content"></div>

                 </div>

             </div>

         </div>

     </div>

 </body>

 </html>

HTML和CSS经典布局6的更多相关文章

  1. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  2. css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...

  3. 只要一行代码，实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  4. css经典布局学习

    ． 布局 布局是css的重头戏,每个系统的布局都有其各自的特点.无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下.例如: 经典三列布局 Bootstrap栅格布局 百度首页布局 微 ...

  5. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  6. css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...

  7. css经典布局之双飞翼

    经典的两个布局方式有圣杯布局和双飞翼布局,圣杯布局主要用在国外,双飞翼布局是淘宝的UED团队开发的,优化了圣杯布局.   主要解决页面分不同列显示的问题,   一般只做页面的时候,我们分三部分,左边, ...

  8. CSS经典布局之弹性布局

    当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...

  9. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

  10. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

随机推荐

  1. 使用Azure REST API创建虚拟机

    Hollis Yao, Shihao Rong  使用REST API创建虚拟机之前,首先要确保Azure订阅中已经建好了"云服务"和"存储账号".如果没有的话 ...

  2. C++ 系列：多线程资源收集

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  3. RSA算法学习

    package com.test.rsa; /* * 为了选择公钥和私钥,Bob必须执行如下步骤: * 1)选择两个大素数p和q.那么p和q应该多大呢?该值越大,RSA越难于破解,但是执行加密和解密所 ...

  4. Asp.Net中使用OpenRowSet操作Excel表，导入Sql Server(实例)

    有两种接口可供选择:Microsoft.Jet.OLEDB.4.0(以下简称 Jet 引擎)和Microsoft.ACE.OLEDB.12.0(以下简称 ACE 引擎). Jet 引擎大家都很熟悉,可 ...

  5. python 学习第二十一天，django知识(三)

    一,django的url路由系统总结 1,url(/index/,函数或者类) 2,url(/index/(\d+), 函数或者类) 3,url(/index/(?P<nid>\d+),函 ...

  6. jave ee之 servlet 记录

    1:没有自动生成web.xml文件 解决方法:新建web工程的时候最后会选择是否创建web.xml文件 2:通过url映射无法打开对应网站 <servlet> <servlet-na ...

  7. Angular内置指令（一）

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  8. 一个快速排序（分类）及使用类似思想实现选择问题[c++实现]

    一.快速排序(快速分类)算法: 问题描述:给定线性集中n个元素和一个整数k,1<=k<=n,要求找出这n个元素中第k小的元素. 思想:选取数组A中的某个元素 t=A[s],然后将其他元素重 ...

  9. 数据库sqlite 存储图片

    SQLite可以存储 BLOB(binary large object,二进制大对象)格式数据,利用它可以在安卓应用开发中存储图片资源. 这里先讲下,怎样把数据从数据库中取出,并显示在imagView ...

  10. Linux下搭建coreseek(sphinx+mmseg3)全文检索

    测试平台:Center OS 1.设置环境,升级/安装系统基础依赖包:m4.autoconf.automake.libtool #设置路径和中文环境: $ export PATH=/usr/local ...