扩展前一篇“上中下三栏布局”，中间栏划分成两列，一列宽度固定，一列宽度随浏览器窗口宽度的变化而变化。固定宽度列定义为#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. 使用Hibernate SQLQuery（转）

    原文地址:http://itindex.net/detail/51776-hibernate-sqlquery-sql,重新排了一下版 Hibernate对原生SQL查询的支持和控制是通过SQLQue ...

  2. html中meta的设置

    meta设置 <meta name="viewport" content="width=device-width, initial-scale=1.0, user- ...

  3. java 启动 shell脚本

    run.sh p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #000000 ...

  4. VS启用调试

    今天访问127.0.0.1  发现 与localhost 不是访问的同一个内容. 于是乎,就向到了另一个方法来调试程序. 1.在IIS 建立站点 并指向程序源. 2.启动vs 调试→附加到进程→找到w ...

  5. 掌握Thinkphp3.2.0----模型初步

    1.为什么要学习框架?框架是什么? 简单的说就是为了简单,提高开发的效率.至于什么是框架(一种规范),现在的我还不是很理解,容后再议. 学习框架最重要的就是遵循,按照开发者的意图来使用该框架. 2.t ...

  6. Java算法之字符串反转分析

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 在基本的工作内容开发中,算法不会显得那么重要,而在百万级别的时候,差距非常大,今天带大家研究下常见的 ...

  7. Hadoop - Unable to load native-hadoop library for your platform

    简介 运行hadoop或者spark(调用hdfs等)时,总出现这样的错误“Unable to load native-hadoop library for your platform”,其实是无法加 ...

  8. UWP&WP8.1 重新绘制图片 WriteableBitmap用法 图片转byte[]数组，byte[]数组转图片

    ---恢复内容开始--- WriteableBitmap 是UWP和WP8.1绘制图片的,重组图片的最重要方法.方法较为简单,方法多样性. 通过查看文档,WriteableBitmap的继承性是    ...

  9. iOS duplicate symbol 变量 in 类名 报错

    该错误信息是我在一个.h文件里申明了公共变量,然后在其他类里重复使用. Build Settings ->No Common Blocks默认为YES,编译器就报错了,需要修改Build Set ...

  10. ionic实现点击popup区域外部分来关闭popup

    var htmlEl = angular.element(document.querySelector('html')); htmlEl.on('click', function (event) { ...