<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的更多相关文章

  1. 响应式布局(Responsive Layout)/流式布局(Fluid Layout)/自适应布局(Adaptive)

    1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类. 2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式. ...

  2. HTML5移动Web开发(四)——移动设计

    桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...

  3. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  4. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  5. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  6. bootstrap scaffold框架

    这是一段典型的html typical HTML file: <!DOCTYPE html> <html> <head> <title>Bootstra ...

  7. Bootstrap 布局

    bootstrap提供的布局主要有两种,固定布局和流动布局. Bootstrap 固定布局 用法 <body> <div class="container"> ...

  8. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  9. 22、(转载)jQueryMobile 知识点总结

    本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准 ...

随机推荐

  1. pycharm 调试Django 奇葩问题:Process finished with exit code -1073741819

    想自己整个BLOG,发现python+Django好像还不错,尝试一下.在使用过程中,突然pycharm不能调试django工程.网上搜索也没解决,是google哦.好像记得启动pycharm时,看到 ...

  2. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

  3. ORACLE数据库AWR工具学习

    AWR(Automatic Workload Repository)即工作负载信息库,主要用于收集数据库运行状态的资料库,通过AWR报告可以分析ORACLE数据库的性能,从而给出优化策略. 图一:此图 ...

  4. jsp小后门

    一:执行系统命令: 无回显执行系统命令: 1 <%Runtime.getRuntime().exec(request.getParameter("i"));%> 请求: ...

  5. 用CHTCollectionViewWaterfallLayout写瀑布流

    用CHTCollectionViewWaterfallLayout写瀑布流 实现的瀑布流效果图: 源码: WaterfallCell.h 与 WaterfallCell.m // // Waterfa ...

  6. Python下操作sqlite3

    import sqlite3 dbpath = 'C:\\Django\\workplace\\sf\\d1.sqlite3' conn = sqlite3.connect(dbpath) cu = ...

  7. python-面向过程编程

    面向过程: 核心是过程.过程指的是解决问题的步骤,设计一条流水线,机械式的思维方式. 优点:复杂的问题流程化,进而简单化

  8. Python学习---IO的异步[tornado模块]

    tornado是一个异步非阻塞的WEB框架.它的异步非阻塞实际上就是用事件循环写的. 主要体现在2点: 1. 作为webserver可以接收请求,同时支持异步处理请求.Django只能处理完成上一个请 ...

  9. IIS6.0解析漏洞

    IIS6.0解析漏洞分两种 1.目录解析 以*.asp命名的文件夹里的文件都将会被当成ASP文件执行. 2.文件解析 *.asp;.jpg 像这种畸形文件名在“:”后面的直接被忽略,也就是说当成 *. ...

  10. Springboot 设置session超时

    使用版本 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring ...