从0开始学编程(9)--(129)-- 三列自适应宽度

Jennycn

浏览: 97461 次
性别:
来自: 北京

最近访客更多访客>>

wincl36

openrace

s周萌

wushuitu986419

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这个,真好啊,我先还担心呢,要是这样,我那个有地图的页面就可以把地图部分放中间,做自适应好了:http://www.deman.cc/DIV+CSS/442.html

三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下

<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

增加以下css样式：

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

分享到：

从0开始学编程(10)--(130)--- 理解了为什 ... | <转>div+css 兼容ie6 ie7 ie8 ie9和Fire ...

2011-10-24 02:34
浏览 877
评论(7)
分类:Web前端
查看更多

7 楼 Jennycn 2011-10-24

div宽度自适应问题 2009-07-30 20:04:22| 分类： Web | 标签： |字号大中小订阅 .

1.宽度自适应的条件

•自适应宽度的层不要指定宽度和float属性
•自适应宽度的层物理的位置放在最下面
•自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象，ie7，ie8，ff3，chrome都正常。
   1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2. <html xmlns="http://www.w3.org/1999/xhtml">
   3. <head>
   4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   5. <title>DIV自适应宽度</title>
   6. <style type="text/css">
   7. 
12. </style>
13. </head>
14. <body>
15. <div style="width:500px;">
16.     <div class="L">left:100px</div>
17.     <div class="R">right:100px</div>
18.     <div class="M">自适应宽度</div>
19. </div>
20. </body>
21. </html>

2.div的默认（不写）宽度是100%，但不撑大父框架，写出width=100%是如果再使用了margin或padding就会将父框架撑大。 table默认宽度为内容的长度，与div不同，因此最好不要混着用，否者这个宽度自适应的方法在ie6下就有问题了。但高版本的浏览器都没问题，是不是说以后大家都会忽略这两者之间的差异呢？

如果父框架设定了固定宽度，那么子div的宽度设为width=100%，即使设定了margin,padding或border都不会撑大父框架。

http://chaoqunz.blog.163.com/blog/static/6154877720096308422202/

6 楼 Jennycn 2011-10-24

因为网页中还有flash，图片等，这些是固定宽度的，它们不太容易随着宽度的改变而铺满空白。960px可以算业内的一个标准，适合主流分辨率1024*768。

看到这句话,那么,我的地图部分也有图片啊, 不对,地图部分的图片是比较小的,定义了大小的,打开后,就和地图本身没关系了

5 楼 Jennycn 2011-10-24

那个姑娘,在前天给了我一张静态的后,说去切片,然后给我html的.说最迟周一可以给我,是注册和登陆的都包括的.

可是,到今天又都没有给我,我下午要和印度人开skype电话会议,想用,也用不了.

姑娘说, 做效果比较难,所以,...

我还没学到这里,所以,也不懂,她效果图都有了,为啥还难呢

我这现在都是直接就html做, 掌握表单的做法后,应该也不难啊:)

我是因为,不会做背景图片,也就不用做什么效果图了,直接就在dreamweaver上看效果

那上面也能看到色彩等效果的,还可以随时就在浏览器里看到的

4 楼 Jennycn 2011-10-24

我那个有一个问题,就是要是地图部分做自适应的话, 看起来是没问题的,问题是,那块容纳地图的容器怎么设置大小呢

很奇怪的,我用百分比就能完成的事情,他们都说不能

这是另外一篇,用position解决的absolue
http://www.wdola.com/a/wangdianmoban/20110926/870.html

内容提要：使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。而在这里给我们提出了一个新的要求，希望有一个三列式布局，其中左栏要求固定宽度，并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和右栏的中间，根据左右栏

　　使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。而在这里给我们提出了一个新的要求，希望有一个三列式布局，其中左栏要求固定宽度，并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和右栏的中间，根据左右栏的间距变化自动适应。这给布局提出了一个新的要求，而且单纯使用float属性与百分比属性并不能够实现，CSS目前还不支持百分比的计算精确到考虑左栏和右栏的占位，如果对中间栏使用100%宽度的话，它将使用浏览器窗口的宽度，而非左栏与右栏的中间间距，因此我们需要重新的思路来考虑这个问题。

　　绝对定位

　　在开始这样的三列布局之前，有必要了解一个新的定位方式——绝对定位。前面的浮动定位方式主要由浏览器根据对象的内容自动进行浮动方向的调整，但是这种方式不能满足定位需求时，就需要新的方法来实现，CSS提供的除去浮动定位之外的另一种定位方式就是绝对定位，绝对定位使用position属性来实现。

　　position用于设置对象的定位方式可用值：static/absolute/relative

　　对页面中的每一个对象而言，默认position属性都是static。

　　如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：

　　如果#layout使用了position:absolute;将会变成绝对定位模式，与此同时，当设置top:20px;时它将永远离浏览器窗口的上方20px，而left:0px;将保证它离浏览器左边距为0px。。

　　注意：一个对象如果设置了position:absolute;它将从本质上与其他对象分离出来，它的定位模式不会影响其它对象，也不会被其它对象的浮动定位所影响，从某种意义上说，使用了绝对定位之后，对象就像一个图层一样浮在了网页之上。

　　绝对定位之后的对象，不会再考虑它与页面中的浮动关系，只需要设置对象的top,right,bottom,left四个方向的值即可。

　　而在本例中，使用绝对定位则能够很好地解决我们所提出的问题。同样，使用3个div形成我们的三个分栏结构：

　　对于#center，我们不需要再设定其浮动方式，只需要让它有左边外边距永远保持#lef与#right的宽度，便实现了两边各让出202px的自适应宽度，而左右两边让的距离，刚好让#left和#right显示在这个空间中，从而实现了而已要求。

　　制作过程如下：先设置body{margin:0px;}清除掉body默认的边界，这样不会影响到三列的显示；

　　接着创建div标签，css的边框、背景色、宽度、高度不再详述，可参考以前的教程，具体说一下本例中新接触的属性在css对话框中是怎么设置的：

本文来源自：网店ola http://www.wdola.com　
原文请参考链接：http://www.wdola.com/a/wangdianmoban/20110926/870.html

3 楼 Jennycn 2011-10-24

其实,我不明白,为啥就不能side 45%,side1 10%

2 楼 Jennycn 2011-10-24

还不知道我的地图会不会遇到这问题,先记在这.不过没明白,要是2边都是浮动元素,那怎么处理

3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下：

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px;}
#main { background: #99FFFF; height: 300px;}

html代码如下：

<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

从截图中明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }

看看，是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。

1 楼 Jennycn 2011-10-24

不知道右边的滚动条是多少px啊

我现在用1419--259

然后左边是550

剩下的好像正好

1100+259=1359,滚动条有60吗?

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论