<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. 实验二:klee处理未建模函数和处理error的方式

    首先,能够分析klee源码固然重要.但是目前尚未到那个地步.我按照我的过程,记录和分析我所做的实验. 结论性内容是: 1.klee处理printf传入符号值的情形时,报为error,不会将符号值具体化 ...

  2. kvm 启动libvirtd时出现错误

    kvm 启动libvirtd市出现错误: /etc/init.d/libvirtd start启动 libvirtd 守护进程:libvirtd: relocation error: libvirtd ...

  3. Oracle EBS AR 收款取值

    select hr.name, a.autoapply_flag, a.AUTOMATCH_SET_ID, a.LEGAL_ENTITY_ID, a.RECEIPT_NUMBER, a.type, a ...

  4. 动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView

    动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView 效果如下: BlackAndWhiteView.h 与 BlackAndWhiteView.m // // BlackAndWhi ...

  5. [翻译] PJR Signature View

    PJR Signature View https://github.com/paritsohraval100/PJRSignatureDemo It is a UIView subclass by w ...

  6. 下拉刷新对象RefreshObject

    下拉刷新对象RefreshObject 效果 说明 1. 分离了动画实现与刷新逻辑 2. 你可以根据自己的需要,设计自己的动画效果,你的动画只需要继承协议,实现协议里面的方法即可 3. 本设计方案是用 ...

  7. 线性规划 Matlab

    线性规划的 Matlab 解法 形式 s.t.( subject to) c和 x为n 维列向量, A. Aeq 为适当维数的矩阵,b .beq为适当维数的列向 量. 函数: linprog(c,A, ...

  8. 禁用loop back check

    在sharepoint 2013 服务器上,如果修改了AAM (alternate access mappings), 在服务器上访问本地的sharepoint就会一直弹出登陆窗口,无法访问. 于是必 ...

  9. redis 配置文件redis.conf

    daemonize yes #---默认值no,该参数用于定制redis服务是否以守护模式运行.--- pidfile /var/run/redis.pid #默认值/var/run/redis.pi ...

  10. 1、JVM-走进java

    1.1.概述 Java不仅仅是一门编程语言,还是一个由一系列计算机软件和规范形成的技术体系,这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境,并广泛应用于嵌入式系统.移动终端.企业服务器.大 ...