fixed fluid layout
<div id="fixed">Sidebar</div>
<div id="fluid">Content</div>
#fixed, #fluid{
padding:20px;
margin-left:2px;
margin-right:2px;
}
#fixed {
float:left;
width:150px;
background-color:#ccc;
}
#fluid {
overflow:hidden;/*没有此属性的话margin会失效*/
background-color:#999999;
}
http://jsfiddle.net/hhcncku5/
fixed fluid layout的更多相关文章
- 响应式布局(Responsive Layout)/流式布局(Fluid Layout)/自适应布局(Adaptive)
1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类. 2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式. ...
- HTML5移动Web开发(四)——移动设计
桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- html5移动web开发实战必读书记
原文 http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- bootstrap scaffold框架
这是一段典型的html typical HTML file: <!DOCTYPE html> <html> <head> <title>Bootstra ...
- Bootstrap 布局
bootstrap提供的布局主要有两种,固定布局和流动布局. Bootstrap 固定布局 用法 <body> <div class="container"> ...
- CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
- 22、(转载)jQueryMobile 知识点总结
本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准 ...
随机推荐
- 动态修改JDBC数据源配置
因项目需要能动态修改数据源的配置,及修改后不用重启整个应用.使用的数据源是apache的BasicDataSource,网上千篇一律的是如下实现: BasicDataSource bds=getDat ...
- MySQL->>innodb_autoinc_lock_mode参数控制auto_increment 插入数据时相关锁的模式
转自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/15498/viewspace-2141640/ ---------------------------------- ...
- 安装Window Server 2008的些配置
上次安装window server2008,由于server2008需要设置很多东西,不然用起来很不爽,就说IE吧,每次随便打开一个网页都要弹出n多窗口出来叫你添加到信任域里面!太烦人了![下面有解决 ...
- 关于sys CPU usage 100%问题的分析
最近一个客户抱怨他的核心EBS数据库出现性能问题.这是一个10.2.0.3的数据库,运行在Red Hat Enterprise Linux Server release 5.5 (Linux x86- ...
- GBK与UTF-8编码错误转换后,无法再正确恢复
字符集错误转换导致的问题 UTF-8格式编码的字节流,按GBK字符集转换为字符串,会出现乱码,这很正常.但将其重新转为字节流,再用UTF-8字符集转为字符串,还是乱码.这就让我产生了疑惑,虽然使用错误 ...
- django中的权限控制(form增删改)
Django默认提供了权限控制,但只能对使用了其自带的登录认证的用户进行权限控制,说白了就是只能对存储在auth_user表中的用户进行权限控制,但不能对未登录过的用户进行权限控制.但如果通过集成LD ...
- Python初学者第二十二天 函数进阶(1)
22day 1.函数命名空间: 2.函数作用域的查找顺序:LEGB locals->enclosing function ->globals ->_builtins_ a.local ...
- JAVA入门之程序设计环境搭建
这篇文章写给刚接触或者想学JAVA的新朋友.学习JAVA,需要找一本好的入门书籍,推荐<Java从入门到精通>,然后就是JAVA程序设计开发环境的搭建. 首先,我们需要安装JAVA开发工具 ...
- eclipse中 项目-->属性-->为什么没有deployment assembly 选项
原因: 因为当前的maven工程不是web工程,需要转换成web工程. 解决方法: 右击工程属性,找到Project Facets,选择Dynamic Web Module,2.5 点击apply.这 ...
- VMWare虚拟机下为Ubuntu 12.04.1配置静态IP(NAT方式)
背景 在虚拟机下运行操作系统,尤其是Linux系统已经是非常常见的做法.有时你想在虚拟机下搭建一个(模拟)服务器来供主机访问,比如搭建一个telnet/ssh.此时你会发现,每次启动虚拟机,VMWar ...