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 标准 ...
随机推荐
- logback.xml配置示例
需要的jar如下: <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api< ...
- Singleton单例模式--C++实现
1. 只支持单线程 (不推荐) #include <iostream> using namespace std; class Singleton { public: static Sing ...
- JavaScript DOM 編程藝術(2版) 綜合實例Band js代碼
function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload!='function') { win ...
- 初始docker
什么是docker? 很多人都是使用docker但是对docker的理解其实并没有这么透彻,只知道怎么用但是不知道为什么用 什么时候去用. 一.环境配置的难题 软件开发最大的麻烦事之一,就是环境配置. ...
- 如何快速的给你的项目添加icon图标
如何快速的给你的项目添加icon图标 下载软件 如何制作图片 将制作的图标拖到项目当中 设置启动页 注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉
- [转]CentOS7增加或修改SSH端口号
前言:开启某服务或软件的端口,要从该服务或软件监听的端口(多以修改配置文件为主),SeLinux和防火墙(FireWall)的安全策略下手.如果使用阿里云,腾讯等第三方服务器还需要对管理控制台的安全组 ...
- [T-ARA][For you]
歌词来源:http://music.163.com/#/song?id=33682511 作曲 : Monster Factory [作曲 : Monster Factory] 作词 : Monste ...
- JavaScript基础进阶之常用字符串方法总结
前面三篇文章简单的把JavaScript基础内容过了一遍,我们已经可以用JavaScript写一些简单的代码了. 今天主要总结一下JavaScript中String对象中自带的一些方法,来帮助我们处理 ...
- JedisPool无法获得资源问题
线上碰到一个问题:redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the ...
- Python学习之路 (五)爬虫(四)正则表示式爬去名言网
爬虫的四个主要步骤 明确目标 (要知道你准备在哪个范围或者网站去搜索) 爬 (将所有的网站的内容全部爬下来) 取 (去掉对我们没用处的数据) 处理数据(按照我们想要的方式存储和使用) 什么是正则表达式 ...