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. UDP及其组播,接收发送封装

    1.Receiver public class Receiver { public delegate void HeartBeat(byte[] data); public event HeartBe ...

  2. Integrate non-OSGi Dependencies

    Consider a scenario where you need to use a non-OSGi jar in your OSGi project. Most libraries are no ...

  3. selenium总结篇，常见方法和页面元素的操作【转】

    原文:http://www.cnblogs.com/tobecrazy/p/4570494.html 今天,总结一下selenium怎么操作web页面常见的元素. 主要有: 上传 alter dial ...

  4. JavaScript 基础第七天（DOM的开始）

    一.引言 JavaScript的内容分为三个部分,这三个部分分别是ECMAScript.DOM.BOM三个部分组成.所谓ECMAScript就是JavaScript和核心基础语法,DOM是文档对象模型 ...

  5. python中re.findall()找到的结果替换

    正则表达式re模块中用findall查找到的是ascii码,所以当比对替换时也需要对应的ascii码才能匹配成功.以下程序是查找文件夹下文件名中含有男.女的文件,并将男替换成1,将女替换成2的程序 # ...

  6. 网页版视频网站可以用html5来实现吗？

    当然可以用html5来实现视频网站,而且html5的诞生完全符合了百度优化,百度蜘蛛对这类的网站友好度非常高,会尽量会给高的权重,但是现在很多做 这类网站的开发还是比较习惯用websocket,这个东 ...

  7. Linux下PHP安装oci8扩展

    PHP通常搭配Mysql使用,但有时候也会连接到Oracle数据库.安装PHP的oci8扩张之前,需要先安装Oracle Instant Client( basic 或 basic lite 版就行了 ...

  8. MySql如何编写高效的SQL

    最近应团队要求,研究整理了下,mysql相关的优化,有些是根据实际java项目中碰到的情况经验之谈.欢迎讨论~ SQL 语言是一种强大而且灵活的语言,在使用 SQL 语言来执行某个关系查询的时候,用户 ...

  9. mono for android学习过程系列教程(6)

    接着上一讲,今天讲的是Button,CheckBox这二个安卓元素, 我们来看第一个Button这个控件,类似winform和webform里面一样,它也是 存在有触发事件的,我们新建初始化项目直接就 ...

  10. 让ZenCoding提升编码速度

    日前写了一篇关于VS神级插件Web Essentials的系列博客,其中在HTML&CSS操作技巧一节简单提到了ZenCoding,今天来详细说一下这个东西. 摘要 Zen Coding是一种 ...