<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. 跳过ssh在首次连接出现检查keys 的提示

    1.将需要登陆主机得公钥添加到known_hosts ssh-keyscan 192.168.77.129 192.168.77.130 >> /root/.ssh/known_hosts ...

  2. leetCode题解之寻找插入位置

    1.问题描述 Search Insert Position Given a sorted array and a target value, return the index if the targe ...

  3. 多数据源报错 expected single matching bean but found 2: xxx,xxx

    问题: expected single matching bean but found 2: xxx,xxx 原因:在 Spring 容器中配置了两个类型Bean,Spring 容器将无法确定到底要用 ...

  4. Centos7 apache2.4.29(httpd) 安装

    重点参考文章:https://blog.csdn.net/MrDing991124/article/details/78829184  写的很详细了,自己按着改博文走了不遍,不错! 一.配置安装环境 ...

  5. Array对象常用方法

    不改变原数组: 1.concat()  连接两个或多个数组 不改变原数组 返回被连接数组的一个副本 2.join()  把数组中所有元素放入一个字符串 不改变原数组 返回字符串 3.slice()   ...

  6. MyEclipse10.6 myeclipse2013下添加jadClipse反编译插件 .

    jad是一个使用比较广泛的Java反编译软件,jadClipse是jad在eclipse下的插件,下面像大家介绍下如何将jadclipse加入到MyEclipse10.X,9.X,8.X,6.X等各版 ...

  7. debian 7 终端上无法调出输出法

    debian 7 终端konsole上无法调出输出法,无法输入汉字的问题解决方案, export GTK_IM_MODULE=fcitxexport QT_IM_MODULE=fcitxexport ...

  8. ijcai statistics

  9. iptables.md

    iptables基本概念 工作流程 1.一个数据包进入网卡时,它首先进入PREROUTING链,内核根据数据包目的IP判断是否需要转发出去. 2.如果数据包就是进入本机的,它就会沿着图向下移动,到达I ...

  10. 经验总结13--EF配置

    EF配置,开发前的准备及步骤. 使用V22013和EF6.1. 1.使用VS新建MVC项目. 2.创建实体类. 3.配置web.config的数据库链接字符串. <connectionStrin ...