html三列居中自动伸缩的结构

<div style="width:100%;height:80px;border:1px solid #DDD;margin-bottom:10px;">Header</div>

<div>

    <div style="width:200px;height:300px;border:1px solid #DDD;float:left;">Left</div>

    <div style="width:200px;height:300px;border:1px solid #DDD;float:right;">Right</div>

    <div style="width:auto;height:300px;border:1px solid #DDD;margin-left:210px;margin-right:210px;margin-top:0px;">Middle</div>

</div>

[html]三列居中自动伸缩的结构的更多相关文章

  1. CSS垂直三列居中，中间自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  3. 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  5. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  6. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  7. Web标准：三、二列和三列布局

    知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...

  8. [置顶] Kubernetes1.7新特性：新增自动伸缩条件和参数

    一.核心概念 Horizontal Pod Autoscaling,简称HPA,是Kubernetes中实现POD水平自动伸缩的功能.云计算具有水平弹性的特性,这个是云计算区别于传统IT技术架构的主要 ...

  9. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

随机推荐

  1. CAP定理

    from wikipedia CAP定理 CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致 ...

  2. myeclipse使用maven插件进行maven install时报错check $m2_home environment variable and mvn script match

    check $m2_home environment variable and mvn script match 分类: maven2015-09-01 18:06 842人阅读 评论(0) 收藏 举 ...

  3. 【转载】Bandits for Recommendation Systems (Part I)

    [原文链接:http://engineering.richrelevance.com/bandits-recommendation-systems/.] [本文链接:http://www.cnblog ...

  4. idea中maven报错：无效的目标发行版: 1.8

    1.project.pom中修改版本 <maven.compiler.source>1.7</maven.compiler.source><maven.compiler. ...

  5. 怎么让让整个HTML页面变灰

    怎么让让整个HTML页面变灰 其实很简单,我们只需要一句话. html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1 ...

  6. excel转化为table（去掉所有列值都为空的值一行，即返回有效值的DataTable）

    /// <summary> /// 去掉所有列值都为空的值一行,即返回有效值的DataTable /// </summary> /// <param name=" ...

  7. 如何在Windows中编译Linux Unix的代码（采用cygwin）？

    来源:http://www.cnblogs.com/rocky_yi/archive/2009/12/08/cygwin.html   作者:rocky_y 很多经典算法往往是用C++在linux下实 ...

  8. Top ShooterHDU2863&&继续xxx定律HDU3784

    继续xxx定律 HDU3784 先看这个题目:HDU3782 #include<iostream> #include<algorithm> #include<stdio. ...

  9. Eclipse侧边栏Outline设置字体

    Eclipse的Outline,Project Explorer,Call Hierarchy等小窗口是很方便的功能,但是遇到函数名或文件名很长的情况,就只能显示前半段.尽管Eclipse的自定义程度 ...

  10. halcon算子

    halcon的算子列表   Chapter 1 :Classification 1.1 Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一个训练样 ...