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 标准 ...
随机推荐
- zTree设置异步加载后展开
//不能直接配置展开属性 因为没有数据,需要添加回调函数,异步加载成功展开 callback: { onAsyncSuccess: zTreeOnAsyncSuccess } //异步加载成功回调函数 ...
- OtterTune来了,DBA怎么办
https://blog.csdn.net/xiangzhihong8/article/details/72887476 最近AI的新闻特别多,席卷了围棋圈之后,成为了技术圈和媒体热捧的话题. 今天又 ...
- Struts-config.xml配置文件《action-mappings》元素的详解
原文地址:http://blog.163.com/sara1124@126/blog/static/11291097020105125537114/ action-mappings 该元素用于将Act ...
- UNIX高级环境编程(8)进程环境(Process Environment)- 进程的启动和退出、内存布局、环境变量列表
在学习进程控制相关知识之前,我们需要了解一个单进程的运行环境. 本章我们将了解一下的内容: 程序运行时,main函数是如何被调用的: 命令行参数是如何被传入到程序中的: 一个典型的内存布局是怎样的: ...
- How HashMap works in Java
https://www.javainterviewpoint.com/hashmap-works-internally-java/ How a HashMap Works internally has ...
- centos7.4之zabbix4.0的fping监控
参考博文: https://www.cnblogs.com/lei0213/p/8859326.html 注释:他是额外安装fping的:因为我yum安装的zabbix,fping就已经自带了:安装步 ...
- 深入浅出SharePoint2013——安装SharePoint2013
在这个页面的底部可以通过相应链接下载Sharepoint Server安装文件 https://technet.microsoft.com/en-us/library/cc262788.aspx
- 智能指针shared_ptr新特性shared_from_this及weak_ptr
enable_shared_from_this是一个模板类,定义于头文件<memory>,其原型为: template< class T > class enable_shar ...
- zepto源码研究 - fx.js
简要:zepto 提供了一个基础方法animate来方便我们运用css动画.主要针对transform,animate以及普通属性(例如left,right,height,width等等)的trans ...
- Jupyter Notebook的使用
命令模式 (按键 Esc 开启) Enter : 转入编辑模式 Shift-Enter : 运行本单元,选中下个单元 Ctrl-Enter : 运行本单元 Alt-Enter : 运行本单元,在其下插 ...