omiga

唉，我怎么会认为它是不可能完成的任务呢～···

要求：1.完成如上布局；2.#main宽度自适应；3.代码顺序#header、#main、#sidebar、#footer。

如果#sidebar能放在#main前面当然就非常简单了～···但是不可以～···

最终解决方案：（查看演示）

<!--css-->
#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:400px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:450px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}
<!--css-->
<!--xhtml-->
<div id="center"></div>
<!--xhtml-->

囧～···鸡蛋，白菜，鞋底板～···来的更猛烈些吧～···

还有其他方法么？欢迎补充～···

BTW：来两个三列的1、2

最近一直和表格打交道，发现各浏览器对表格边框的处理不尽相同，以致影响到最终的显示。这一问题主要是Firefox与非Firefox浏览器对表格边框处理上的差异。

可简单地用以下表达式表示（tableWidth为表格的视觉上的实际宽度，width为定义宽度）：

FF：tableWidth = width+borderWidth/2

非FF浏览器：tableWidth = width;

测试l链接

FF中可能导致的问题

补充：尽管FF中表格在视觉上的宽度大于定义宽度，但其在文档中的实际宽度仍是最初的定义宽度，故其不会在文档中占用其定义大小外的空间。测试链接

table-layout

语法：
　　table-layout : auto | fixed
　　参数：
　　auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
　　fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

隐藏对象内的多余文本，一般做法：

selector{width:*px; white-space:nowrap; overflow:hidden;}　但是这段代码用在td上不会生效，单元格依然会被撑开～···

解决办法：同时为其table定义width:*; table-layout : fixed OK：多余文本已经被自动隐藏。

5key那里的，很早前在GR里看到，后来又找很久，刚才翻GR又无意翻到～记下～···

原文地址：http://5key.net/blog/index.php/2008/06/10/wordpress-theme-framework-whiteboard/

首先声明CSS中并没有“block-inline”这一属性，只有inline-block。inline-block属性将对象呈现为内联对象，但其文本呈递为块级对象，可以简单地理解为被inline-block定义后的对象是一个可以与其相邻的内联对象同行显示的块级对象。

block-inline则反之，对外变现为块级对象，其内文本表现为内联对象。实际应用中，这种情况是经常遇到的。比如想将一个链接单行显示（可以使用display:block，也可以使用<br/>，还可以在其外层嵌套块级容器，但这些明显不是最好的方法），但是又不想链接的感应区域是整个行，实际应用见本站存档页。

具体解决方法如下：

.block-inline{
　　display:block; /*对外呈现为块级对象*/
　　width:0; /*小于正常宽度即可*/
　　white-space:nowrap; /*单行显示*/
}

原理也就是在将对象呈现为块级元素后，定义小于正常宽度的宽度值，再强制文本单行显示以撑开到正常鼠标感应宽度～···