易栈网-膘叔

CSS在我的网站上没有分类，因此我也不知道怎么放就扔到javascript里了。权且当成前端分类吧？哈哈，自我安慰一下
CSS我实在不熟，所以看到有好的东西，都会暂时的收藏。

作者是司徒正美（老是让我想起车田正美，不知道的人，估计和我不是同一年代的。OHOHOH）

内容如下：

翻译自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;
}

运行代码

好了，文章就此结果，更多的例子可以参看原作者的网址，或点击以下链接：2 列 ， 3 列， 4 列，以及 5 列。

看到这个标题的时候，我和此文作者是一样的心态，apache也能做这个？我一向以为是nginx之类的才行？
仔细一想，如果可行，那应该是用了apache 的 proxy吧？以前用proxy做过asp的代理，如果负载均衡，估计用这个也应该可以吧？
究竟是不是这样呢？看看原文内容就知道了
原文地址为：http://tech.idv2.com/2009/07/22/loadbalancer-with-apache/
内容如下：

第一次看到这个标题时我也很惊讶，Apache居然还能做负载均衡？真是太强大了。 经过一番调查后发现的确可以，而且功能一点都不差。 这都归功于 mod_proxy 这个模块。 不愧是强大的Apache啊。

废话少说，下面就来解释一下负载均衡的设置方法。

一般来说，负载均衡就是将客户端的请求分流给后端的各个真实服务器， 达到负载均衡的目的。还有一种方式是用两台服务器，一台作为主服务器(Master)， 另一台作为热备份(Hot Standby)，请求全部分给主服务器，在主服务器当机时， 立即切换到备份服务器，以提高系统的整体可靠性。

负载均衡的设置

Apache可以应对上面这两种需求。先来讨论一下如何做负载均衡。 首先需要启用Apache的几个模块：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_http_module modules/mod_proxy_http.so

mod_proxy提供代理服务器功能，mod_proxy_balancer提供负载均衡功能， mod_proxy_http让代理服务器能支持HTTP协议。如果把mod_proxy_http换成 其他协议模块（如mod_proxy_ftp），或许能支持其他协议的负载均衡， 有兴趣的朋友可以自己尝试一下。

然后要添加以下配置：

ProxyRequests Off
<Proxy balancer://mycluster>
    BalancerMember http://node-a.myserver.com:8080
    BalancerMember http://node-b.myserver.com:8080
</Proxy>
ProxyPass / balancer://mycluster

# 警告：以下这段配置仅用于调试，绝不要添加到生产环境中！！！
<Location /balancer-manager>
    SetHandler balancer-manager
    Order Deny,Allow
    Deny from all
    Allow from localhost
</Location>

从上面的 ProxyRequests Off 这条可以看出，实际上负载均衡器就是一个反向代理， 只不过它的代理转发地址不是某台具体的服务器，而是一个 balancer:// 协议：

ProxyPass / balancer://mycluster

协议地址可以随便定义。然后，在<Proxy>段中设置该balancer协议的内容即可。 BalancerMember指令可以添加负载均衡组中的真实服务器地址。

下面那段<Location /balancer-manager>是用来监视负载均衡的工作情况的， 调试时可以加上（生产环境中禁止使用！），然后访问 http://localhost/balancer-manager/ 即可看到 负载均衡的工作状况。

OK，改完之后重启服务器，访问你的Apache所在服务器的地址，即可看到负载均衡的效果了。 打开 balancer-manager 的界面，可以看到请求是平均分配的。

如果不想平均分配怎么办？给 BalancerMember 加上 loadfactor 参数即可，取值范围为1-100。 比如你有三台服务器，负载分配比例为 7:2:1，只需这样设置：

ProxyRequests Off
<Proxy balancer://mycluster>
    BalancerMember http://node-a.myserver.com:8080 loadfactor=7
    BalancerMember http://node-b.myserver.com:8080 loadfactor=2
    BalancerMember http://node-c.myserver.com:8080 loadfactor=1
</Proxy>
ProxyPass / balancer://mycluster

默认情况下，负载均衡会尽量让各个服务器接受的请求次数满足预设的比例。 如果要改变算法，可以使用 lbmethod 属性。如：

ProxyRequests Off
<Proxy balancer://mycluster>
    BalancerMember http://node-a.myserver.com:8080 loadfactor=7
    BalancerMember http://node-b.myserver.com:8080 loadfactor=2
    BalancerMember http://node-c.myserver.com:8080 loadfactor=1
</Proxy>
ProxyPass / balancer://mycluster
ProxySet lbmethod=bytraffic

lbmethod可能的取值有：

各种算法的原理请参见Apache的文档。

热备份(Hot Standby)

热备份的实现很简单，只需添加 status=+H 属性，就可以把某台服务器指定为备份服务器：

ProxyRequests Off
<Proxy balancer://mycluster>
    BalancerMember http://node-a.myserver.com:8080
    BalancerMember http://node-b.myserver.com:8080 status=+H
</Proxy>
ProxyPass / balancer://mycluster

从 balancer-manager 界面中可以看到，请求总是流向 node-a ，一旦node-a挂掉， Apache会检测到错误并把请求分流给 node-b。Apache会每隔几分钟检测一下 node-a 的状况， 如果node-a恢复，就继续使用node-a。

500年一遇的日全食就这么被一场大雨给阻隔了。
下次要看再等三百年吧，准备考虑开始修真，可以多活几年。哈哈

随便说说关于日全食的笑话：

1、天宫用了盗版windows,被微软300年黑屏一次

2、天宫操作系统被黑客入侵，全黑了

3、为什么这次黑屏有五分钟？因为天狗吃太阳时，太烫，不象以前吃月亮，冷的，一口就可以干掉

4、老天和人玩：天黑请闭眼

5、日全食事件，显然是别有用心的太阳，煽动不明真相的月亮，利用地球自传和公转的机会，实施的一起有组织有预谋的破坏中国稳定的颠覆活动。我XX已经派出乌云部队进行拦截，同时对月亮进行宣传教育，在我XX强大的ZZ攻势和宣传教育下，月亮深刻明白了自身的错误，弃暗投明，并劝说太阳为宇宙建设发光发热。目前太阳月亮地球情绪稳定。乌云部队也已经返回基地。

6、嫦娥驾着月亮想与太阳神私会，却惹得地球人怨声载道，嫦娥不喜，结果不欢而散 （评论：美女傍老外，自然那么多人不开心了）

7、太阳：“亮，我们又见面了，很多话想跟你说，却不知道从何说起。”（月亮一下子扑入太阳怀中）月亮：“日，什么都不用说了！”地球及其他星体：[安静并感叹]我们五百年才看一次A片啊！

8、太阳：“亮，五百年了，我们终于又在一起了。 ”月亮：“日，什么都不用说了 ” （关灯，一头扑入怀中）。。。。。。。。（一会儿）月亮：“怎么才五分钟？ ”太阳：“地球上看的人太多了，我紧张

其他的后来人补上。。

一直在考虑是不是要换到wordpress, sablog用了这么长时间，也算是有感情了的。只是，他一直不更新，而且前台模板用的那种定界符做模板处理，我很不习惯。
以前coolcode.cn也是用的wordpress，后来转到了sablog上面。如今，我却想转到wordpress上面。。。不知道是进步还是退步。

也曾想过重写前台，请了两个朋友帮我做页面，结果现在是程序写了一半，页面做了一半，离完成看来是遥遥无期了。。

所以，记录下这个文章，方便以后真的要转换的时候，也能做个参考。。

» 阅读全文

网上找来的代码，经典的东西哦。做网游的人可能会用到。。

原文连接：http://www.gamedev.net/reference/articles/article2003.asp
中文翻译：http://data.gameres.com/message.asp?TopicID=25439

我是从http://www.cnblogs.com/jimtomjim/archive/2009/07/20/1527112.html拷贝来的