<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DIV+CSS实现两边固定宽度,中间自适应宽度-天魅设计博客</title>

<style>

body{ margin:0; padding:10px;}

#head{ margin-bottom:10px; height:50px; background-color:#999999}

#main{}

#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}

#mid{ width:auto;background:#00FF00;margin:0 220px;border:1px solid #000;}

#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}

#foot{ margin-top:10px; clear:both; height:50px; background-color:#CCCCCC} 

</style>

</head> 

<body>

<div id="head">我是头部</div>

<div id="main">

<div id="left">我是左边,宽:200px</div>

<div id="right">我是右边,宽:200px</div>

<div id="mid">我是中间,宽自适应</div>

</div>

<div id="foot">我是底部</div>

</body>

</html>

CSS 自适应的更多相关文章

  1. css 自适应布局阮一峰

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  2. css 自适应布局

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  3. css自适应浏览器大小

    css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...

  4. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...

  5. css 纯css自适应页面 示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  7. DIV+CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  9. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  10. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

随机推荐

  1. tomcat jvm 参数优化

    1. 内存设置 常见配置汇总 堆设置 -Xms:初始堆大小 -Xmx:最大堆大小 -XX:NewSize=n:设置年轻代大小 -XX:NewRatio=n:设置年轻代和年老代的比值.如:为3,表示年轻 ...

  2. [转]SSH 原理和基本使用：ssh 安全配置 以及ssh key 认证登录

    一.什么是 SSH ? SSH全称(Secure SHell)是一种网络协议,顾名思义就是非常安全的shell,主要用于计算机间加密传输.早期,互联网通信都是基于明文通信,一旦被截获,内容就暴露无遗. ...

  3. [转]同一个tomcat不同项目的session共享问题

    问题描述: session常常用来存储一些公共信息供不同页面访问,比如用户登录信息.访问同一个tomcat下的不同项目所创建的session是不一样的.自然地面临了如何共享session的问题. 解决 ...

  4. mysql 中 delete 子查询的限制

    1 DELETE FROM tablename 中的 tablename 不能起别名 delete ; [Err] - You have an error in your SQL syntax; 2 ...

  5. SpringBoot+mybatis实现多数据源支持

    什么是多数据源支持? 简单的说,就是一个项目里,同时可以访问多个不同的数据库. 实现原理 单个数据源在配置时会绑定一套mybatis配置,多个数据源时,不同的数据源绑定不同的mybatis配置就可以了 ...

  6. 在 Unity 中基于 Oculus DK1 的开发

    开发环境: Windows 10 专业版 64位(GeForce GTX 970M,驱动版本:378.72) 大朋助手 1.3.2.10,大朋E2(http://www.deepoon.com/dap ...

  7. [LintCode] N-Queens

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...

  8. scp拷贝文件

    有了亚马逊的ec2后,物美价廉,但是,亚马逊的aws使用密钥登陆的,命令和密码登录有一点不同.记录. 1.有密钥登陆,首先要把密钥文件 xxx.pem 的权限设为700,否则会报错. scp -i x ...

  9. 安装 xcode 5.1.1

    https://developer.apple.com/downloads/ 切换路径xcode 路径.然并卵,不好用 http://cms.35g.tw/coding/xcode-select-%E ...

  10. zipkin微服务调用链分析

    1.zipkin的作用 在微服务架构下,一个http请求从发出到响应,中间可能经过了N多服务的调用,或者N多逻辑操作, 如何监控某个服务,或者某个逻辑操作的执行情况,对分析耗时操作,性能瓶颈具有很大价 ...