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. HTTP 302 404 500 状态消息

    1xx:信息 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求. 101 Switching Protocols 服务器转换协议:服务器将 ...

  2. requirejs+angularjs搭建SPA页面应用

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  3. Docker ntpdate Permition error

    After building a Dockerfile, I run it. I figure out that there is something wrong with local time. S ...

  4. Visual Studio C# IntelliSense not automatically displaying

    Options -> Text Editor -> C# -> IntelliSense

  5. bdb log为什么 有 region buffer 和 log cursor buf

    对bdb log来说, 在共享内存中 有一块 buffer, 同时每一个 log cursor 都自带一个 malloc的buf. why? 我认为: region buffer存的是log最末尾, ...

  6. HTML URL 编码

    转自:http://www.w3school.com.cn/tags/html_ref_urlencode.htmlURL 编码 - 从 %00 到 %8f ASCII Value URL-encod ...

  7. SAP SLT (Landscape Transformation) 企业定制培训

    No. Item Remark 1 SAP SLT概述 SAP Landscape Transformation Overview 2 SAP SLT 安装与配置<1> for abap ...

  8. day9---多线程，线程锁，队列

    进程.线程 http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html 使用threading模块实现多线程编程[综述] Pyt ...

  9. (原创) 巩固理解I2C协议(MCU，经验)

        题外话:这几天天气突然转冷了.今天已是11月23日了,查查黄历,昨天(11月22日)刚好是小雪,一夜温度骤降,果然老祖先的经验有灵验!冬天来了,还是多加加衣服,注意保暖! 1.Abstract ...

  10. Paypal支付接口

    先吐槽一下,国外的创业环境真的远远好于国内的创业环境. vps便宜,网络质量好,没有各种政策监管,各种便捷的金融工具.这其中就包括paypal. Paypal 支持两种付款方式,信用卡+paypal注 ...