扩展前一篇“上中下三栏布局”，中间栏划分成两列，一列宽度固定，一列宽度随浏览器窗口宽度的变化而变化。固定宽度列定义为#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. 20145205 《Java程序设计》第7周学习总结

    教材学习内容总结 认识时间与日期 1.格林威治时间(GMT):通过观察太阳而得,因为地球公转轨道为椭圆形且速度不一,本身自传减速而造成误差. 2.世界时(UT):通过观测远方星体跨过子午线而得,受地球 ...

  2. MyBatis快速入门

    一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...

  3. Thinking in Java——笔记(18)

    I/O The original byte-oriented library was supplemented with char-oriented, Unicode-based I/O classe ...

  4. 准备上线,切换到master分支,报错

    切换到master分支,准备上线,把上次上线sourceTree保存的修改拉出来: 运行,报错了: stackOverflow一搜说要删除旧的: 我show in finder 把他删了,然后双击安装 ...

  5. c# WinForm中使用DevExpress.XtraSpreadsheet.SpreadsheetControl时，给sheet批量赋值

    即使看了Demo,我也是很久才搞清除的,可能是我太笨了 首先在form上添加一个spreadsheetcontrol控件,添加各种引用: 然后添加引用: using DevExpress.XtraEd ...

  6. 带你玩转JavaWeb开发之六-mysql基本语法详解及实例(3)

    [语法] update 表名 set 列名=列值,列名=列值 -[条件]; [注意事项] * 修改的列的值需要与列的类型一致. * 修改的列的值的长度不能超过列的类型的最大长度. * 字符串类型和日期 ...

  7. selenium定位页面元素的一件趣事

    PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...

  8. java常见面试题及答案 11-20（JVM篇）

    11.JVM内存分哪几个区,每个区的作用是什么? Java虚拟机主要分为以下一个区: 方法区:1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区 ...

  9. wordpress取文章时间

    wordpress的时间处理, 取文章的本地时间用get_the_time('c'),其中c可以用“D, d M Y H:i:s"等替代. 取文章的UTC时间用get_post_time(' ...

  10. ipxe引导远程的windows

    使用ipxe解决本地引导远程系统 本地安装的centos7,然后修改grub.cfg来使用ipxe技术引导远程windows,实现双系统 os-->centos7 修改grub.cfg 在文件最 ...