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. <转>boost 1.53 and STLPort build binary for windows

      1.编译STLPort:    1.1 .开始菜单运行vs2008的命令行工具    1.2.进入E:\00.CODE.SDK\STLport-5.2.1\    1.2.运行configure ...

  2. node开发

    1. 国内使用npm安装某些插件的时候,偶尔会有网络问题,可以使用cnpm:(后续所有使用 npm 无法正常安装的,都改成 cnpm 试试) a. 首先使用 npm 安装 cnpm:npm insta ...

  3. [UCSD白板题] Primitive Calculator

    Problem Introduction You are given a primitive calculator that can perform the following three opera ...

  4. JQuery FullCalendar(一)

    FullCalendar官网:http://arshaw.com/fullcalendar FullCalendar中文API:http://blog.sina.com.cn/s/blog_9475b ...

  5. 个人网页的留言板实现与sae的数据库账户配置

    个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

  6. 我的github代码库

    我的github代码库地址:https://github.com/gooree.Enjoy coding,enjoy sharing.

  7. JUnit Assert方法总结

    junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类.1.assertTrue/False([String message,]boolean condi ...

  8. mysql 按时间段统计（年，季度，月，天，时）

    按年汇总,统计: select sum(mymoney) as totalmoney, count(*) as sheets from mytable group by date_format(col ...

  9. Java开发视频网站大概需要多少钱？

    这个还真不好说,需要看你对视频网站有什么要求?你的数据库选择的是什么型号的?需要开发几个页面?服务器是需要高端的还是中低端的?还有你对完成时间有什么要求,这些细节也是决定价格的关键因素. 上面这些因素 ...

  10. net与树莓派的情缘（一）

    想做个NAS  由于手中经济有限又不想花太多钱,所以决定买个树莓派自己搭建. 板子:树莓派2代 elem14的 内存卡:闪迪 class10 16g 网线一根,电源线一个 系统:树莓派官方 Raspb ...