<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. pytts3语音合成遇到的中文问题

    在使用pytts3语音合成时,遇到中文语音错乱.程序代码本身很简单,也是网上公认的一种写法: #coding: UTF-8import pyttsx3; engine = pyttsx3.init() ...

  2. B2B 电商业务之 Quote

    商品在网店页面上一般会向买家显示价格.对于B2B, 同一商品对不同的买家可能会展示不同的价格.即使如此,买家仍然可以和卖家再协商价格,最终以不同于网店中显示的价格成交.这个协商价格过程就叫Quote, ...

  3. MYSQL 5.7 sqlmode 行为

    最近碰到了sql_mode 的一些问题,故进行了研究,根据实际情况研究其行为. sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ER ...

  4. mongodb存储引擎

    存储引擎(Storage Engine)是MongoDB的核心组件,负责管理数据如何存储在硬盘(Disk)和内存(Memory)上.从MongoDB 3.2 版本开始,MongoDB 支持多数据存储引 ...

  5. java:通过Calendar类正确计算两日期之间的间隔

    在开发Android应用时偶然需要用到一个提示用户已用天数的功能,从实现上来看无非就是持久化存入用户第一次使用应用的时间firstTime(通过SharedPreferences .xml.sqlit ...

  6. python 基础-----数字,字符串,if while 循环 数据类型的转换简单介绍

    一.第一个python小程序 首先我们要知道python创立的初衷是:Python崇尚优美.清晰.简单. 所以python比起其他的语言需要的工作量少了一半都不止,比如和现在一直霸占语言排行榜  榜首 ...

  7. [C++] 用Xcode来写C++程序[7] Class

    用Xcode来写C++程序[7] Class 不带构造函数的Rectangle类 // // Rectangle.h // Plus // // Created by YouXianMing on 1 ...

  8. iPhone/android的viewport 禁止页面自动缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...

  9. python3编程的一些实用技巧1

    1.choice函数:返回一个列表,元组,字符串的随机项   :   调用时应导入random模块,如from random import choice 2.print 两个字符串, 逗号,+号进行连 ...

  10. 【连接】Spring事物的传播行为

    http://blog.csdn.net/it_wangxiangpan/article/details/24180085 PROPAGATION_REQUIRED--支持当前事务,如果当前没有事务, ...