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

    “What happens if we replace aspecific resource? Would that be reflected in all objects using the res ...

  2. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  3. 怎样解决Myeclipse中运行jsp乱码问题，亲测有效（虽然是个小问题但是为了大家不被网络上的一些乱七八糟的回答坑）不是改什么windows-propories-...............

    方法: 在jsp页面中pageEncoding属性值改为UTF-8,指定用UTF-8编码.gbk或者gb18030编码都无效.不是改什么windows-propories-.............. ...

  4. [转载] Ubuntu 16.04 LTS 一键安装VNC

    安装 X11VNC: sudo apt install x11vnc -y 配置访问密码: sudo x11vnc -storepasswd /etc/x11vnc.pass 创建服务: vi /li ...

  5. Unity中使用WebView

    Unity中使用WebView @(设计) 需求,最近游戏中需要引入H5直播页面和更新比较频繁的赛事页面,需求包括:加密传参数.和Unity交互,在Unity框架下其实有几种方案: 内置函数Appli ...

  6. SSH整合（Struts2+hibernate+spring）

    1.创建表 create table t_user( id int primary key auto_increment, username varchar(50), password varchar ...

  7. shudupoj2676

    #include<stdio.h> int num,v[100][2],map[10][10]; bool judge(int x,int y,int k) {  int i,j,it,j ...

  8. DotNetBar grid筛选 按时间筛选

    PatientDiaryPanel.Columns["RECORDDATE"].FilterExpr = string.Format("date(RECORDDATE) ...

  9. error: RPC failed; result=22, HTTP code = 411

    git config http.postBuffer 524288000orgit config --system http.postBuffer 524288000  

  10. web前端程序员真的值这么多钱吗？

    对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用. 前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会 ...