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

    select * from plat_material_resource where stl_url LIKE '/data1/upload%' --截取字符串 UPDATE plat_materia ...

  2. IOS网络第四天 -网络文件上传（0923略）

    01-NSURLSession02-断点续传 02-文件上传01-基本的上传 03-文件上传03-代码封装 04-文件上传04-获得MIMEType.mp4 05-文件的压缩和解压缩.mp4 06-压 ...

  3. 跳转到下一个activity

    /* * 第一个跳转代码 */ button.setOnClickListener(new OnClickListener() { @Override public void onClick(View ...

  4. VirtualBox + CentOS 使用 NAT + Host-Only 方式联网

    之前一直使用 VMware 作为虚拟机,这几天看<跟阿铭学Linux>,里面用的是虚拟机是 Oracle VirtualBox,也跟着安装配置一个,但是比较坑的是照着上面的配置折腾了很久才 ...

  5. Xamarin Android 绑定jar库同时将so库打包进去

    1.在创建的Bindings Library项目中,新建Assets目录: 2.Assets目录下再分别创建armeabi,armeabi-v7a,x86三个目录: 3.将so文件分布copy到三个目 ...

  6. PCB上过孔via钻孔的直径如何设置 是任意的吗 谈谈PCB钻孔工艺及规格

    PCB上过孔via钻孔的直径如何设置,是不是可以随便填入一个直径尺寸就行了?比如我的走线宽度是6mil,那我的via过孔直径也设置为6mil,节约布线空间岂不是更好?这样的设计板厂是否都能按照设计规格 ...

  7. 取到 tableview 自定义section header 上的button

    在自定义的组头上,添加了一个button,在点击cell是想取到相应的组头上的button来进行操作时(比如说隐藏.是否响应点击事件等)时,我遇到了取不到所有button的问题,试过了常规的通过vie ...

  8. smarty中使用truncate出现乱码，用mb_substr解决

  9. CSS之viewport 2

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完 ...

  10. 2.Linux如何学习

    Linux的应用: 企业应用 个人应用 平行运算:所谓的平行运算指的是将原本的工作分成多份然后交给多台主机去运算,最终再将结果收集起来的一种方式.由于通过高速网络使用到多台主机(集群),将原本需要很长 ...