2009-12-27

09年10大开源软件 谷歌Chrome OS上榜

http://www.cnbeta.com/articles/100874.htm

- 使用 Google 工具栏发送

2009-12-24

创建无类型对象。

类似于C#3.0里的Anonymous Types,JavaScript 也可以创建无类型的对象。形式如下:
var obj1 = {};
var obj2 =
{
ID: 1,
Name: "Johnson",
showMessage: function()
{
alert("ID: " + this.ID + "Name: " + this.Name);
}
}
这里定义了两个无类型的对象,obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID, Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。
用这种方式创建属性方法时,也可以用字符串定义属性方法的名字。如:

var obj2 =
{
"ID" : 1,
"Name": "Johnson"
}

in reference to:

"var obj2 =  {     "ID" : 1,     "Name": "Johnson" }"
- JavaScript面向对象编程(1)-- 基础 - Johnson.NET - 博客园 (view on Google Sidewiki)

删除属性与方法

直接将要删除的属性或方法赋值为undefined即可:
obj1.ID = 1;
obj1.Name = undefined;

obj1.showMessage = undefined;

in reference to:

"删除属性与方法"
- JavaScript面向对象编程(1)-- 基础 - Johnson.NET - 博客园 (view on Google Sidewiki)

修改属性与方法

// 修改属性
obj1.ID = 2;
obj1.Name = "Amanda";

// 修改方法
obj1.showMessage = function()
{
alert("ID: " + this.ID");
}

in reference to:

"修改属性与方法"
- JavaScript面向对象编程(1)-- 基础 - Johnson.NET - 博客园 (view on Google Sidewiki)

对对象属性,方法的添加、修改和删除操作

var obj1 = new Object();
//添加属性
obj1.ID = 1;
obj1.Name = "johnson";

//添加方法
obj1.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}

in reference to:

"4. 对对象属性,方法的添加、修改和删除操作"
- JavaScript面向对象编程(1)-- 基础 - Johnson.NET - 博客园 (view on Google Sidewiki)

如何获得一个类的实例

var obj1 = new myClass();

in reference to:

"实现了类就应该可以获得类的实例,JavaScript提供了一个方法可以获得对象实例。即 new操作符。 其实JavaScript中,类和函数是同一个概念,当用new操作一个函数时就返回一个对象。如下:"
- JavaScript面向对象编程(1)-- 基础 - Johnson.NET - 博客园 (view on Google Sidewiki)

JavaScript如何实现类

JS中函数可以包含函数,包含在函数里边的变量作为类的属性,被包含的函数则成为类的方法。

in reference to:

"JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下:"
- JavaScript面向对象编程(1)-- 基础 - Johnson.NET - 博客园 (view on Google Sidewiki)

2009-12-23

Google工具条的“撰写评注”很有意思

Firefox安装Google最新工具条,新增了几项功能,其中"撰写评注"很有意思。安装后,如果你打开一个有网友评注的页面,评注会出现在浏览器左边,最重要的是你可以添加自己的评论。


Google工具栏“撰写评注”确实不错

呵呵!希望不仅仅是评注!

in reference to: Google (view on Google Sidewiki)

美国前总统小布什的退休生活

中国在这方的确比美国好五倍

in reference to:

"今年初,美国前总统小布什被妻子劳拉派去买电池,店员看了看他后惊奇地问:“有没有人说过你长得真像前总统?”这位已经卸任的“憨豆”总统,在得克萨斯州东北部城市达拉斯的家中过着低调的生活,似乎已慢慢被公众遗忘了。英国《独立报》近日刊发文章,详细叙述了小布什2009年退休后的“蜗居”生活。"
- [转贴]美国前总统小布什的退休生活-猫眼看人-凯迪社区 (view on Google Sidewiki)

2009-11-07

【新奇】据说是Google出的新玩意 相当酷!

只能说未来到了~

不知道大家小的时候有没有看过七龙珠呢?里面的赛亚人有一个可以侦测跟分析战斗力的仪器,虽然以前觉得很特科幻但是这项技术其实已经慢慢在研发了,相信未来不久就会出现在大家眼前,而今天就是要介绍一下这个大家梦寐以求的新产品Google可携式搜寻面板,可不要小看这薄薄的一张面版,里面内建了WIFI、Google 搜寻、马上出现搜寻的结果



你不僅可以看整棟樓,也可以詳細到只看其中一層樓的資訊,馬上就出現聯絡電話跟聯絡人姓名了,不過不知道這樣會不會侵犯到隱私,當然這個面板不只是只能搜這些而已,它還可以搜尋其他物體像是汽車,走在路上突然看到一台很帥的車,卻不知道叫甚麼名子也不知道裡面的性能等詳細資料,或是出遊時不知道附近有什麼好吃的食物或看到很漂亮的花跟很奇特的不知名昆蟲等等...只要在這個機器上做選擇它都可以即時幫你查到相關資料。  


這台內建掃描器,所以當你有遇到不知道的詞或單字也可以搜尋一下, 
     


這個單字的各種解釋就會馬上出現,你也可以利用各種字典跟維基百科,這樣是不是方便很多了呢



市內導覽可在任何建築物內,機場,車站,醫院等地方達到引路的功能       



線上即時翻譯拉丁文馬上變英文,只是不知道翻的好不好。  



如果你想在密密麻麻的報紙裡面找到一些你比較感興趣的文字也可以使用關鍵字搜尋喔





就連天空上的星星也可以研究喔,感覺比天文台還要好了@@    



甚至也可以預先看到開花後的樣子喔



再來就是養生者的福音了,它可以幫你分析食物裡的營養成分、熱量等 





出門對準天空,螢幕立即顯示今日的氣象報告。



對準一個景物(例如這個火山),螢幕就會顯示標的物地圖位置。 



也可當成USB,轉載相機、iPod裡頭的圖片檔案。   



在一個剛裝潢好的空屋當中,透過搜尋器來幫忙家具的配置、並顯示價錢、顏色等情報





最後還滿期望這個產品能趕快出現在市面上,這能帶給我們更多更好的搜尋跟便利啊      

2009-10-19

09版发达国家名单,拉美诞生第一个发达国家

  联合国开发计划署刚刚公布了2009年度各国的人类发展指数(HDI)。从指数中可以看出,今年全球的发达国家已经增加到37个,准发达国家已经增加到 16个。2009年正式跨入发达国家龙门的4个国家是卡塔尔、捷克、巴巴多斯和马耳他;而新加入准发达国家行列的有3个国家:安提瓜和巴布达、墨西哥、哥 斯达黎加。首先对这些国家的国民表示祝贺!
  
  通常人们界定一个国家是否属于发达国家,都是用人均GDP来界定,但单独用人均GDP 显然存在很多缺点,首先是人均GDP很不稳定,受汇率、物价等影响而波动很大,其次人均GDP也只代表了经济水平,而不能代表一个国家的全面发展水平。对 此,联合国的开发计划署编制了"人类发展指数",用以取代单一的人均GDP衡量体系。"人类发展指数"由三部分内容构成,包括"健康长寿"、"教育获得" 和"生活水平", 健康长寿,用出生时预期寿命来衡量;教育获得,用成人识字率(2/3权重)及小学、中学、大学综合入学率(1/3权重)共同衡量;生活水平,用实际人均 GDP(购买力平价美元)来衡量。通过公式将这三方面的指标组合起来,计算出各国的"人类发展指数",以此来界定一个国家是否属于发达国家,就比较全面客 观了。
  
  按照" 人类发展指数"超过0.9为发达国家,超过0.85为准发达国家(发达国家的预备队),可以看出,到2009年,世界已经有37个发达国家(比2008年 增加4个)和16个准发达国家。新增的4个国家是卡塔尔、捷克、巴巴多斯和马耳他,新增的3个准发达国家是:安提瓜和巴布达、墨西哥、哥斯达黎加。
  
  这其中,以巴巴多斯进入发达国家行列的意义最为重大,因为它成为拉丁美洲第一个发达国家,也是第一个以黑人为主体的发达国家。
  
  我把37个发达国家和16个准发达国家分别按地区和档次整理列出。括号里面的数字就是该国的"人类发展指数",按照联合国开发计划署2009年公布的(其所采用的实际上为2007年的数据)。
  
  一、 按地区列出
  (1)37个发达国家名单:
   欧洲(23国):挪威(0.971);冰岛(0.969);爱尔兰(0.965);荷兰(0.964);瑞典(0.963);法国(0.961);瑞士 (0.960);卢森堡(0.960);芬兰(0.959);奥地利(0.955);西班牙(0.955);丹麦(0.955);比利时(0.953); 意大利(0.951);列支敦士登(0.951);英国(0.947);德国(0.947);希腊(0.942);安道尔(0.934);斯洛文尼亚 (0.929);葡萄牙(0.909);捷克(0.903);马耳他(0.902)
  美洲(3国):加拿大(0.966);美国(0.956);巴巴多斯(0.903)
  亚洲(4国):日本(0.960);新加坡(0.944);韩国(0.937);文莱(0.920)
  中东(5国):以色列(0.935);科威特(0.916);塞浦路斯(0.914);卡塔尔(0.910);阿联酋(0.903)
  大洋洲(2国):澳大利亚(0.970);新西兰(0.950)
    
  (2)16个准发达国家(处在向发达国家过渡的阶段)名单:
  欧洲(7国):爱沙比亚(0.883);波兰(0.880);斯洛伐克(0.880);匈牙利(0.879);克罗地亚(0.871);立陶宛(0.870);拉脱维亚(0.866)
  美洲(8国):智利(0.878);安提瓜和巴布达(0.868);阿根廷(0.866);乌拉圭(0.865);古巴(0.863);巴哈马(0.856);墨西哥(0.854);哥斯达黎加(0.854)
  中东(1国):巴林(0.895)
    
  另外,已达到发达国家水平的非国家经济体还有中国香港、波多黎各、中国台湾、马提尼克岛、格陵兰、瓜德罗普岛等
    
  二、按发展水平列出
  (1)高端发达国家(人类发达指数>0.950)20国:
   挪威(0.971);澳大利亚(0.970);冰岛(0.969);加拿大(0.966);爱尔兰(0.965);荷兰(0.964);瑞典 (0.963);法国(0.961);瑞士(0.960);日本(0.960);卢森堡(0.960);芬兰(0.959);美国(0.956);奥地利 (0.955);西班牙(0.955);丹麦(0.955);比利时(0.953);意大利(0.951);列支敦士登(0.951);新西兰 (0.950)
    
  (2)中端发达国家(0.920-0.949)9国:
  英国(0.947);德国(0.947);新加坡(0.944);希腊(0.942);韩国(0.937);以色列(0.935);安道尔(0.934);斯洛文尼亚(0.929);文莱(0.920)
    
  (3)初等发达国家(0.900-0.919)8国:
  科威特(0.916);塞浦路斯(0.914);卡塔尔(0.910);葡萄牙(0.909);阿联酋(0.903);捷克(0.903);巴巴多斯(0.903);马耳他(0.902)
    
  (4)发达国家的一线预备梯队(0.870-0.899)8国:
  巴林(0.895);爱沙比亚(0.883);波兰(0.880);斯洛伐克(0.880);匈牙利(0.879);智利(0.878);克罗地亚(0.871);立陶宛(0.870);
    
  (5)发达国家的二线预备梯队:(0.850-0.870)8国:
  安提瓜和巴布达(0.868);拉脱维亚(0.866);阿根廷(0.866);乌拉圭(0.865);古巴(0.863);巴哈马(0.856);墨西哥(0.854);哥斯达黎加(0.854)
  
   从发达国家的地区分布来看,已经形成了"三块+两线"的局面。西欧发达国家区域正在向东欧延伸;北美发达国家区域正在向中南美扩散;大洋洲仍然是澳大利 亚和新西兰两个发达国家;东亚发达国家和地区(日、韩、台、港、新、文)已连接成线,中东发达国家区域也从点到线,并开始向中东腹地推进。
  
  遗憾的是,整个非洲大陆仍没有能够产生一个发达国家或准发达国家。
  
  2009年中国的人类发展指数(HDI)为0.772,位列182个国家中的第92位。

很抱歉,您的计算机或网络可能正在发送自动查询

公司所有电脑用一个代理上网,于是使用谷歌搜索时每次都提示:

很抱歉...

...您的计算机或网络可能正在发送自动查询。为了保护我们的用户,我们目前无法处理您的请求。

要继续搜索,请输入下面所示数字:


真是烦死了,为此谷歌丧失里公司里很多用户,他们抱怨这个SB的行为,抱怨每次输入那该死验证码!

谷歌这样做可能因为遭受CCAV大裤衩无耻恶意的黄色关键词搜索之后,为了防范这里想CCAV这些无耻的东西而出此下策,可殃及了一些共用代理上网的公司,我想这个也是他们没想到的。

?ui=2&view=att&th=1246ae708f0167ec&attid=0.1&disp=attd&realattid=ii_1246ae708f0167ec&zw

2009-09-02

Google在网吧什么样

Google在网吧什么样,想必各位不知道吧?

看附近,每个google.comgoogle.cng.cn的页面最上方都被添加两个如下文字链接:


baidu和bing的页面并没有这两个链接,情况附件!

2009-08-13

我有罪,请原谅与教诲。

我有罪!当看到《中国在WTO知识产权仲裁中败北》的消息时,居然由衷的高兴起来,心里美滋滋的,笑得双唇不合,且与每一个熟悉的人分享之。我有罪,请原谅与教诲。

[QUOTE]据《华尔街日报》报道,世贸组织周三公布了长达460页的中美知识产权仲裁结果(PDF)。根据裁决结果,世贸组织要求中国政府不得强迫美国知识产权所有者只能与政府掌控的公司交易,这种做法会极大地消耗物流和成本。对美国电影、游戏和唱片行业而言,这个结果是一次巨大的胜利,将允许它们以更低的价格、通过更好的销售渠道出售自己的作品。世贸组织还要求中国允许外国公司通过互联网销售音乐。[/QUOTE]

2009-08-06

看通用破产的困惑

在美国 美国产福克斯三厢 2.0AT豪华型的价钱是:6.8304 * 18,265 = 124 757.256 = 12万人民币

在中国 国产福克斯三厢 2.0AT豪华型的价钱是:151900 = 15万人民币

难道中国产的福克斯成本高过美国产的?

美国汽车公司的工人平均每小时工资包括福利等,竟高达70多美元

而在中国汽车工厂里工人每小时工资包括福利等只是1.5美元

那国产汽车成本高过美国,又是为什么?

是政治成本吗?

如何是?

那就是说,在中国,工人本来可以得到更高的报酬,但却支付给政府了?

是这样吗?

然而中国的厂家却没有面临破产倒闭的,这又如何解释?

2009-07-19

Re: 为什么Linux连输入法都做不好?

这样泛泛而谈的敏感词比 CCAV 还要 CCAV,

嘛叫"Linux 输入法",
你恰好用过其中一个可能配置得不太好的输入法,然后就说"Linux 输入法" 差,算什么逻辑?

别说别人骂你绿坝,

如果有人找一个 Windows 下的垃圾输入法(如只能 ABC),认为这个(Windows 下其中一个)输入法差,
然后抱怨 Windows 输入法是最垃圾的输入法,
你会怎么样想?

2009/7/19 GANG.STONE <romantic.stone@gmail.com>
我不得不承认Linux下的中文输入法是目前为此见过的最垃圾的输入法,

Re: 为什么Linux连输入法都做不好?



2009/7/19 GANG.STONE <romantic.stone@gmail.com>
早就对Linux下的中文输入法振振有词了,别的不说,我不得不承认Linux下的中文输入法是目前为此见过的最垃圾的输入法,比我N年前的手机输入法还糟糕。

你用过的是什么输入法?
貌似现在并没有一个叫 "Linux 输入法的东西"

常见的 ibus 是中国人(  Shawn.P.Huang)开发的,fcitx 亦是中国人(一位搞核武器的牛人 Yuking)开发的

不能跟踪,
你说的是不能光标跟随,说了很多这是因为输入法有多种工作方式,
而你的发行版可能默认的不一样
 
样式丑陋......

什么叫样式丑陋?
因为 Gtk 主题不同?

别跟我说可以通过到XXX修改XXX为XXX可以解决问题,让这样的事情见鬼去吧。
谁才见鬼,
为什么不能去配置,
再说配置是发行版的事情。

难怪MS说其成功是因为对手太垃圾,深感中....

当然可以找一大堆原因来告诉我为什么会是这个样子的。可Linux要想在桌面市场有所作为,最好什么都别说。

你让别人别说,那你干吗要说
整个胡搞曼缠

为什么Linux连输入法都做不好?

早就对Linux下的中文输入法振振有词了,别的不说,我不得不承认Linux下的中文输入法是目前为此见过的最垃圾的输入法,比我N年前的手机输入法还糟糕。不能跟踪,样式丑陋......别跟我说可以通过到XXX修改XXX为XXX可以解决问题,让这样的事情见鬼去吧。

难怪MS说其成功是因为对手太垃圾,深感中....

当然可以找一大堆原因来告诉我为什么会是这个样子的。可Linux要想在桌面市场有所作为,最好什么都别说。

2009-07-15

纯CSS无hacks的跨游览器多列布局

翻译自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks,有些部分根据我的理解改了,让一些初心者更好理解。

利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中都能通过验证。

问题的症结所在

可点击放大缩小

如上图所示,由于各列的内容不一致导致其背景的高度也不统一。而背景实质上是内容(标准的盒子模型是由内容区,补白区,边框区与边界区组成,背景存在于前三者中;IE为前两者)的自适应的问题。再转化一下,如何撑大那些较短的列的高度,让所有列的高度等于最高的列的高度?这个,的确很很棘手,因为我们不清楚各列的高度,也无从得知哪一列最高。我们也不能简单地给所有列一个明确的高度,这可能会导致所有列都多出一大片空白,或者很不亏由于高度不足导致某些列的内容无法全部显示出来!现实中,内容的长度是动态的,因此每列的高度也是动态的。我们必须意识到在网络中,不存在"固定"二字,每个人的显示器的分辩率都不尽一样,游览器的字体大小设置也不尽相同,这些都会影响到内容的显示高度。

对内容与背景实行分离

解决等高问题的第一步就是把它拆分为两个较小的,可以单独解决的部分。这样,我们原来是一列对应一个DIV,现在是一列对应一个DIV,一个用来装载内容,一个用来显示背景。这种分离有利于我们对各个元素的掌控和把它们用另一种更有效的方式组合起来,这引起我很快会在下面的章节讲述。

利用浮动嵌套解决最高列的高度的问题。

这是解决多列等高的关键。使一个DIV的高度等于最高列的高度的唯一方法就是让这个DIV包含所有的列。换句话说,通过把所有的列放在一个容器中,容器的高度就是最高列的高度。这是个非常有用的结构。

可点击放大缩小

单行三列的布局的结构层代码。

<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>

对应的表现层代码。

#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:40%;
background:yellow;
}
#col3 {
float:left;
width:30%;
background:green;
}

为了使用这种结构在所有游览器都正常工作,我们必须让外层容器往左或右浮动,并且其子元素包含每一栏内容的DIV也跟着浮动,哪一个方向都无所谓。浮动会使用它们往上对齐于外围容器的上补白,并且浮动的容器会自动调整自身的高度与宽度以实现对浮动子元素的包含。但是如果容器被定义了高度与宽度,则它不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。但在IE6与低版本的IE中,子浮动元素能撑开外围元素;幸好IE7与IE8已引正了这个不符合标准的做法。

增加用来显示背景的容器

下一步是增加额外的容器,让它们彼此嵌套,并让所有外围的容器数(新增的加上原来的那一个)等于列的总数:3。这三个容器用来显示各列的背景。请注意,我们去掉了原来各列的背景,把它们移至这些容器上。

可点击放大缩小

新的结构层代码,让新增的容器套在原来的外围容器上!

<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>

新的表现层代码,新增的容器都是浮动元素!

所有元素左浮动,将容器宽度设为100%,使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。注,原文是所有容器的宽都设为100%,其实根本没有这样的必须,因为在浮动嵌套中,外面的容器必须会被撑大能容得下内部子元素的大小!

#container3 {
float:left;
/*width:100%;*/
background:green;
}
#container2 {
float:left;
/*width:100%;*/
background:yellow;
}
#container1 {
float:left;
width:100%;
background:red;
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}

用相对定位来移动容器

现在是所有容器都完美地累在一起,只显示一种背景颜色,我们必须让其他背景也显示出来。为此我们就得利用相对定位来让这些容器像阶梯一样放置。这个本可以使用负边界技术,但该死的IE5.5的盒子模型与W3C的不一致,为了兼容我们就得使用到CSS hack。由于本文声明是不使用CSS hack,因此放弃。首先让#container2向右移到30%,由于#container2装着#container1,而#container1上装着那三个列,这样一来,最右边的列就被移出游览器的右边了。而最外围最底层的容器#container3则露出来了,露了左边的30%。然后我们再移动最上层的容器#container1,向右边移动40%,于是原来盖住的第二层容器也露出来了,露出其左边的40%,而#container1则只剩下100%-30%-40%=30%;上方的列也只剩下最右边的列,却表现为位于最左边。这样,背景也显示正常了!

可点击放大缩小

对应的表现层代码

#container3 {
float:left;
/*width:100%;*/
/*没有必要的代码被注释掉!*/
background:green;
}
#container2 {
float:left;
/*width:100%;*/
/*没有必要的代码被注释掉!*/
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}

把各列的内容移回原来的位置上

由于最上层的那三列都是被整体往右往到(页面的)70%,我们再把它们都往左移回70%就是!最后,由于我们前两个背景容器都是被向右移动,移出了游览器,它们都与游览器的右边连在一起,我们可以设置最底层的背景容器的overflow来隐藏那些被移出的部分。

#container3 {
float:left;
/*width:100%;*/
/*没有必要的代码被注释掉!*/
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
/*width:100%;*/
/*没有必要的代码被注释掉!*/
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:30%;
position:relative;
left:70%;
}
#col2 {
float:left;
width:40%;
position:relative;
left:70%;
}
#col3 {
float:left;
width:30%;
position:relative;
left:70%;
}

对列添加补白(内边距)

最后,我们对列增加补白,让每列显得大方一些,而不是密密麻麻地塞满一列。但是如果我们增加补白,可能有一些游览器的有病又犯了,在IE6和更低版本的IE中,其怪异的盒子模型,会产生一些我们不愿看到的结果。如,一个 200px 宽 20px 补白的 box 在 IE 中被视为 200px 宽,在其他浏览器中则为正确的 240px。补白应该加在元素的宽度上。

不过放心,我们可以用完全不依赖于 padding 的方法来解决这个问题。相反,我们把列弄窄一点(列宽减去两侧的补白),之后用相对定位把它们移至正确的位置。例如,我们用了 2% 的补白,则 30% 的列将减至 26%,40% 的列减至 36%。用相对定位移回列时需谨记,现在列变窄了,所以当它们一起像最初那样左浮动时,每一个需要比上一个移动更远的距离。

可点击放大缩小

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东,并阻止其干扰其他布局。重申一下,这只是 IE 的问题,其他所有浏览器会保持正确的布局,不管列内是虾米。如果你真想这样做,可以用 IE 条件注释只对 IE 写规则。

#container3 {
float:left;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}