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

变宽度布局

1-2-1 等比例变宽

总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）

content 设置 width: 66%; float: left;

side 设置 width: 33%; float: right;

增加clear 空div

HTML 结构：

<!DOCTYPE HTML>

<html>

	<head>

    	<title>1-2-1 等比例变宽</title>

        <meta charset="utf-8" />

    </head>
<body>

    	<div id="header">

            <p>Header</p>

        </div>
<div id="container">

            <div id="content">

                <h2>Content Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>

            <div id="side">

                <h2>Side Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>

            <div id="clear"></div>

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

			<p>footer footer footer footer footer footer footer footer</p>

        </div>

    </body>

</html>

CSS：

			body{

				font: 13px/1.5 Arial;

				margin: 0;

				padding: 0;

			}

			#header, #container, #footer{

				width: 85%;

				margin: 10px auto;

				min-width: 650px;

			}

			#header{

				border: 1px solid black;

				background-color: #666;

			}

			#content{

				border: 1px solid black;

				background-color: #999;

				width: 66%;

				float: left;

			}

			#side{

				border: 1px solid black;

				background-color: #999;

				width: 33%;

				float: right;

			}

			#clear{

				clear: both;

			}
#footer{

				border: 1px solid black;

				background-color: #CCC;

			}

1-2-1 单列变宽

side 固定宽度，content 随窗体宽度变化

side设置 width: 200px; float: left;

在content外层增加 contentWrap，contentWrap 设置为 width:
100%; margin-right: -220px; float: right;

而content 设置为 margin-right: 220px;

这样就利用了wrap实现了content的宽度为 100%-320px

HTML 结构：

<!DOCTYPE HTML>

<html>

	<head>

    	<title>1-2-1 单列变宽</title>

        <meta charset="utf-8" />

    </head>
<body>

    	<div id="header">

            <p>Header</p>

        </div>
<div id="container">

            <div id="contentWrap">

                <div id="content">

                    <h2>Content Header</h2>

                    <div class="main">

                        <p>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                        </p>

                    </div>

                </div>

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

                <h2>Side Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>

            <div id="clear"></div>

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

			<p>footer footer footer footer footer footer footer footer</p>

        </div>

    </body>

</html>

CSS：

			body{

				font: 13px/1.5 Arial;

				margin: 0;

				padding: 0;

			}

			#header, #container, #footer{

				width: 85%;

				margin: 10px auto;

				min-width: 700px;

			}

			#header{

				border: 1px solid black;

				background-color: #666;

			}

			#contentWrap{

				width: 100%;

				margin-right: -220px;

				float: right;

			}

			#content{

				border: 1px solid black;

				background-color: #999;

				margin-right: 220px;

			}

			#side{

				border: 1px solid black;

				background-color: #999;

				width: 200px;

				float: left;

			}

			#clear{

				clear: both;

			}

			#footer{

				border: 1px solid black;

				background-color: #CCC;

			}

1-3-1 单側列宽固定

nav 固定宽度 width: 200px; float: left;

在content 和 side 外层增加两层 div：outerWrap 和 innerWrap

outerWrap 设置为 width: 100%; margin-right: -210px; float:
right;

innerWrap 设置为 margin-right: 210px;

然后content 和 side 相当于在 innerWrap 内部等比例变宽

HTML结构：

<!DOCTYPE HTML>

<html>

	<head>

    	<title>1-3-1 单側列宽固定</title>

        <meta charset="utf-8" />

    </head>
<body>

    	<div id="header">

            <p>Header</p>

        </div>
<div id="container">

            <div id="nav">

                <h2>Nav Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>
<div id="outerWrap">

            	<div id="innerWrap">

                    <div id="content">

                        <h2>Content Header</h2>

                        <div class="main">

                            <p>

                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                            </p>

                        </div>

                    </div>

                    <div id="side">

                        <h2>Side Header</h2>

                        <div class="main">

                            <p>

                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                            </p>

                        </div>

                    </div>

                </div>

            </div>

            <div id="clear"></div>

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

			<p>footer footer footer footer footer footer footer footer</p>

        </div>

    </body>

</html>

CSS：

			body{

				font: 13px/1.5 Arial;

				margin: 0;

				padding: 0;

			}

			#header, #container, #footer{

				width: 85%;

				margin: 10px auto;

				min-width: 800px;

			}

			#header{

				border: 1px solid black;

				background-color: #666;

			}

			#nav{

				border: 1px solid black;

				background-color: #999;

				width: 200px;

				float: left;

			}

			#outerWrap{

				width: 100%;

				margin-right: -210px;

				float: right;

			}

			#innerWrap{

				margin-right: 210px;

			}

			#content{

				border: 1px solid black;

				background-color: #999;

				width: 66%;

				float: left;

			}

			#side{

				border: 1px solid black;

				background-color: #999;

				width: 33%;

				float: right;

			}

			#clear{

				clear: both;

			}
#footer{

				border: 1px solid black;

				background-color: #CCC;

			}

1-3-1 中间列宽固定

content 宽度固定

在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap

navWrap 设置为 width: 50%; margin-left: -210px; float:
left;

nav 设置为 margin-left: 210px;

同理，sideWrap 和 side 也做类似的设置

HTML结构：

<!DOCTYPE HTML>

<html>

	<head>

    	<title>1-3-1 中间列宽固定</title>

        <meta charset="utf-8" />

    </head>
<body>

    	<div id="header">

            <p>Header</p>

        </div>
<div id="container">

            <div id="navWrap">

                <div id="nav">

                    <h2>Nav Header</h2>

                    <div class="main">

                        <p>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                        </p>

                    </div>

                </div>

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

                <h2>Content Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>
<div id="sideWrap">

                <div id="side">

                    <h2>Side Header</h2>

                    <div class="main">

                        <p>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                        </p>

                    </div>

                </div>

            </div>
<div id="clear"></div>

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

			<p>footer footer footer footer footer footer footer footer</p>

        </div>

    </body>

</html>

CSS：

			body{

				font: 13px/1.5 Arial;

				margin: 0;

				padding: 0;

			}

			#header, #container, #footer{

				width: 85%;

				margin: 10px auto;

				min-width: 700px;

			}

			#header{

				border: 1px solid black;

				background-color: #666;

			}

			#navWrap{

				width: 50%;

				margin-left: -210px;

				float: left;

			}

			#nav{

				border: 1px solid black;

				background-color: #999;

				margin-left: 210px;

			}

			#content{

				border: 1px solid black;

				background-color: #999;

				width: 400px;

				float: left;

				margin-left: 10px;

			}

			#sideWrap{

				width: 49.9%;

				margin-right: -210px;

				float: right;

			}

			#side{

				border: 1px solid black;

				background-color: #999;

				margin-right: 210px;

			}

			#clear{

				clear: both;

			}
#footer{

				border: 1px solid black;

				background-color: #CCC;

			}

1-3-1 双側列宽固定

nav 和 side 宽度固定

nav 设置为 width: 200px; float: left;

在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度

然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度

HTML 结构：

<!DOCTYPE HTML>

<html>

	<head>

    	<title>1-3-1 双側列宽固定</title>

        <meta charset="utf-8" />

    </head>
<body>

    	<div id="header">

            <p>Header</p>

        </div>
<div id="container">

            <div id="nav">

                <h2>Nav Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>
<div id="outerWrap">

            	<div id="innerWrap">

                    <div id="contentWrap">

                        <div id="content">

                            <h2>Content Header</h2>

                            <div class="main">

                                <p>

                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                                </p>

                            </div>

                        </div>

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

                        <h2>Side Header</h2>

                        <div class="main">

                            <p>

                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                            </p>

                        </div>

                    </div>

                </div>

            </div>

            <div id="clear"></div>

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

			<p>footer footer footer footer footer footer footer footer</p>

        </div>

    </body>

</html>

CSS：

			body{

				font: 13px/1.5 Arial;

				margin: 0;

				padding: 0;

			}

			#header, #container, #footer{

				width: 85%;

				margin: 10px auto;

				min-width: 800px;

			}

			#header{

				border: 1px solid black;

				background-color: #666;

			}

			#nav{

				border: 1px solid black;

				background-color: #999;

				width: 200px;

				float: left;

			}

			#outerWrap{

				width: 100%;

				margin-right: -210px;

				float: right;

			}

			#innerWrap{

				margin-right: 210px;

			}

			#contentWrap{

				width: 100%;

				margin-left: -110px;

				float: left;

			}

			#content{

				border: 1px solid black;

				background-color: #999;

				margin-left: 110px;

			}

			#side{

				border: 1px solid black;

				background-color: #999;

				width: 100px;

				float: right;

			}

			#clear{

				clear: both;

			}
#footer{

				border: 1px solid black;

				background-color: #CCC;

			}

1-3-1 中列和側列宽固定

nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽

HTML 结构：

<!DOCTYPE HTML>

<html>

	<head>

    	<title>1-3-1 中列和側列宽固定</title>

        <meta charset="utf-8" />

    </head>
<body>

    	<div id="header">

            <p>Header</p>

        </div>
<div id="container">
<div id="nav">

                <h2>Nav Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

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

                <h2>Content Header</h2>

                <div class="main">

                    <p>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                    </p>

                </div>

            </div>
<div id="sideWrap">

                <div id="side">

                    <h2>Side Header</h2>

                    <div class="main">

                        <p>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>

                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

                        </p>

                    </div>

                </div>

            </div>

            <div id="clear"></div>

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

			<p>footer footer footer footer footer footer footer footer</p>

        </div>

    </body>

</html>

CSS：

			body{

				font: 13px/1.5 Arial;

				margin: 0;

				padding: 0;

			}

			#header, #container, #footer{

				width: 85%;

				margin: 10px auto;

				min-width: 800px;

			}

			#header{

				border: 1px solid black;

				background-color: #666;

			}

			#nav{

				border: 1px solid black;

				background-color: #999;

				width: 200px;

				float: left;

			}

			#content{

				border: 1px solid black;

				background-color: #999;

				margin-left: 10px;

				width: 400px;

				float: left;

			}

			#sideWrap{

				width: 100%;

				margin-right: -620px;

				float: right;

			}

			#side{

				border: 1px solid black;

				background-color: #999;

				margin-right: 620px;

			}

			#clear{

				clear: both;

			}
#footer{

				border: 1px solid black;

				background-color: #CCC;

			}

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

时间： 2024-10-12 15:51:48

CSS 布局总结——变宽度布局的相关文章

CSS设置表格TD宽度布局

使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto : 大多数浏览器采用自动表格布局算法对表格布局:表格及单元格的宽度取决于其包含的内容. fixed :表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定:在当前列中,该单元格所在行之后的行并不会影响整个列宽. **注意** 使用 "fixed" 布局方式时,整个表格可以在其首行

响应式布局之浮动圣杯布局（双飞翼布局）—-自适应宽度布局

前端开发中自适应布局在实际应用中越来越普遍,特别是随着更多高级浏览器的出现html5和css3得到了更好的应用. 圣杯布局有个好处,完全符合前端开发中渐进增强的理念,由于浏览器解析是从DOM的上至下,这样圣杯布局可以把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析. 下面的demo能够解决实际应用中绝大多数的自适应布局问题了,有兴趣的coder们可以研究下,代码如下: 左边固定,右边自适应(双飞翼布局的实现):demoA html部分: cont

RelativeLayout中的格局，自适应宽度布局

RelativeLayout中的布局,自适应宽度布局该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:background="#ff0000ff" android:id="@+id/tvwAtLeft"android:layout_height="wrap_content" android:layout_width="wrap_content"

css判断不同分辨率显示不同宽度布局实现自适应宽度

一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化(网页宽度自动随浏览器显示宽度而变宽变窄).随着发展,越来越多的电脑用户显示屏分辨率越来越高,但有的用户还是使用1024px的分辨率的显示屏(根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少,但我们CSS布局时仍然需要至少考虑1024px分辨率用户),

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此．必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

web前端学习笔记(CSS变化宽度布局)

Posted on 2013-09-30 09:03 Stephen_Liu 阅读(2406) 评论(6) 编辑收藏一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left middle right 但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

独行DIV自适应宽度布局CSS实例与扩大应用范围

DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局.通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧. 关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度. 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度. 实例CSS代码: .box{ width:60%; height:80px; border:1px solid #F