扩展前一篇“上中下三栏布局”，中间栏划分成两列，一列宽度固定，一列宽度随浏览器窗口宽度的变化而变化。固定宽度列定义为#side，可分为左侧布局和右侧布局，分别实现如下：

1-2-1左侧固定宽度布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>1-2-1左侧固定宽度布局</title>

<style type="text/css">

html, body, .container {margin:0;padding:0;height: 100%;text-align:center;}

body > .container {height: auto; min-height: 100%;}

#main {height: 100%;padding-bottom: 35px;}  /* 必须使用和footer相同的高度 */

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;}

.clearfix{display:inline-block}

/* Hides from IE-mac \*/

* html .clearfix { height: 1%;}

.clearfix {display: block;}

#contentWrap {float: left;width: 100%;height:100%;}

#content {margin-left: 300px;}

#side{float:left;margin-left:-100%;height:100%;position:relative;width: 300px;}

#footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;}

#header{height:90px;background-color:#666666;}

#content{background-color:#888888;}

#side{background-color:#777777;}

#footer{background-color:#999999;}

</style>

</head>

<body>

	<div class="container">

	    <!-- 头部 -->

            <div id="header">header</div>

            <div id="main" class="clearfix">

                <div id="contentWrap">

			<div id="content">content</div>

	        </div>

		<div id="side">side</div>

	    </div>

	</div>

	<!-- 底部 -->

	<div id="footer">footer</div>

</body>

</html>

　　

1-2-1右侧固定宽度布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>1-2-1右侧固定宽度布局</title>

<style type="text/css">

html, body, .container {margin:0;padding:0;height: 100%;text-align:center;}

body > .container {height: auto; min-height: 100%;}

#main {height: 100%;padding-bottom: 35px;}  /* 必须使用和footer相同的高度 */

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;}

.clearfix{display:inline-block}

/* Hides from IE-mac \*/

* html .clearfix { height: 1%;}

.clearfix {display: block;}

#contentWrap {margin-left: -300px;float: left;width: 100%;}

#content {margin-left: 300px;}

#side {float: right;width: 300px;}

#footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;}

#header{height:90px;background-color:#666666;}

#content{background-color:#888888;}

#side{background-color:#777777;}

#footer{background-color:#999999;}

</style>

</head>

<body>

	<div class="container">

            <!-- 头部 -->

            <div id="header">header</div>

            <div id="main" class="clearfix">

                <div id="contentWrap">

		    <div id="content">content</div>

		</div>

		<div id="side">side</div>

	    </div>

	</div>

	<!-- 底部 -->

	<div id="footer">footer</div>

</body>

</html>

常见UI布局之1-2-1单列变宽布局的更多相关文章

  1. CSS 布局总结——变宽度布局

    变宽度布局 1-2-1 等比例变宽 总宽度设置 width: 85%; min-width: 650px; (关于IE6的min-width支持,可用) content 设置 width: 66%;  ...

  2. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  3. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  4. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  5. Android常见UI组件之ListView（二）——定制ListView

    Android常见UI组件之ListView(二)--定制ListView 这一篇接上篇.展示ListView中选择多个项及实现筛选功能~ 1.在位于res/values目录下的strings.xml ...

  6. Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

    居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...

  7. PC响应式、固宽布局思想

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局. 如果不明 ...

  8. Android 布局的一些控件的补充和布局的补充（今儿没课）

    前面写的博客可能会有点乱: 1,是不太会排版. 2,就是我一边看书,一边听学长讲课,所以有的知识就融入进去了,我写的都是自己的意见和理解,大家取我精华,弃我糟粕哈. 今天是书上的内容,主要讲布局的,一 ...

  9. CSS 实现：两栏布局（等宽布局）

    ☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> & ...

随机推荐

  1. 使用nginx和iptables做访问权限控制（IP和MAC）

    之前配置的服务器,相当于对整个内网都是公开的 而且,除了可以通过80端口的nginx来间接访问各项服务,也可以绕过nginx,直接ip地址加端口访问对应服务 这是不对的啊,所以我们要做一些限制 因为只 ...

  2. 使用C#模拟Outlook发送邮件，代码编译报错

    添加OutLook API using OutLook = Microsoft.Office.Interop.Outlook; 发送邮件方法 public void SendEmail() { Out ...

  3. 浅谈java抽象类和接口

    第一次,写这个,没有把图片放上来,有兴趣的可以点击连接看原文 http://note.youdao.com/noteshare?id=aecbd52b9240f23c0954e8086b848a17 ...

  4. SQL UNION 和 UNION ALL 操作符\SQL SELECT INTO 语句\SQL CREATE DATABASE 语句

    SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...

  5. Android高级之十二讲之如何降低应用内存消耗

    安卓应用的内存往往是有限的,从开始的8M到16M,24M,32M,48M,64M等逐步变大,但内存的变大是由于分辨率的提高导致,并不意味着可以随意声明使用内存,而不及时回收(即使Java有自己的垃圾回 ...

  6. WordPress基础：文章的自定义栏目的使用

    写文章只有标题和内容,那么我想加个加个怎么办呢?这时候就可以用到自定义栏目了,这个功能相当于增加了一个键值对 1.启动“自定义栏目” 2.定义键值对 3.调用自定义栏目值 <?php $pric ...

  7. Java读写资源文件类Properties

    Java中读写资源文件最重要的类是Properties 1) 资源文件要求如下: 1.properties文件是一个文本文件 2.properties文件的语法有两种,一种是注释,一种属性配置.  注 ...

  8. SQL编码乱码解决方法

    摘自 http://www.cnblogs.com/keke/archive/2011/08/05/2128557.html 使用SQL SERVER2005的时候常常遇到中文字符为乱码的情况,经过研 ...

  9. Dreamweaver的代码与设计简单结合的运用

    首先在设计里面写好自己需要的内容,在文字设置中,选中要设置的文字,然后点击属性栏的css,把目标规则改为新内联样式,然后在改变字体的大小颜色样式,然后在代码里面根据需要再修改: 图片插入是在菜单栏点击 ...

  10. jQuery语法介绍

    来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...