深山老林

在iVane的Blog上看到一篇《两列一边宽度固定,另一边宽度自适应布局》，方法很不错，原文如下：

================================================

这个布局其实在实际应用中是经常用到的, 比如我这个blog的布局结构也是这样的, 利用这个布局还可以延伸到三列去, 甚至更多的变化.

...

[http://syre.blogbus.com/logs/5192416.html]

如下代码定义了一个循环模板的例子：

看到这个标题很容易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像写了这么多次，还是会不太记得。嘿嘿~~

一般的文字截断(适用于内联与块)：
==============CSS================ 
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省...

在CSSPlay上看到了一个垂直居中的例子，感觉还是不错的，跟大家分享一下：

======================CSS=======================
.holder{
 width:740px;
 height:300px;
 border:1px solid #777;
 text-align:center;
 display:table-cell;
 vertical-align:middle;
}
/*以下样式针对IE*/
.edge{
 width:0;
 height:100%;
 display:inline-block;
 vertical-align:middle;
}
.container{
 vertical-align:middle;
 display:inline-block;
}
================================================

====================HTML=======================
<div class="holder">
<!--[if IE]><span class="edge"></span><![endif]-->
<!--[if IE]><span class="container"><![endif]--><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="Homework" title="Homework" />测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span><![endif]-->
</div>
=================================================

代码改动了一点点。有两点必须要注意的：

1. HTML中IE条件注解部分的标签要用内联对象标签。
2. “<!--[if IE]><span class="edge"></span><![endif]-->”要放在内容之前。如果放在之后，内容是中文时会不能居中。

/*
========================
函数：显示或隐藏层
showDiv(divId_array,showLocality_array)
参数说明：
divId_array 所有要操作的层ID，用逗号分隔
showLocality_array 所有要显示的层在参数DivIdArray所对应的位置。为“0”或空时全部显示，设为负数则全部隐藏。
例如：showDiv('div3,div1,div2','2,3')为显示第二个(div1)和第三个层(div2)，第一个层(div3)将被隐藏。
========================
*/
function showDiv(divId_array,showLocality_array)
{
 var div_array = new Array();
 var locality_array = new Array();
 var intLocality;//showLocality_array数组长度
 var intDiv;//div_array 数组长度
 var intTemp = 1;//临时变量
 var intTmp = 1;//临时变量
 
 //初始化
 if (divId_array)
 {
  div_array = divId_array.split(",");
 }else{
  intDiv = 0;
 }
 if (showLocality_array)
 {
  locality_array = showLocality_array.split(",");
  intLocality = locality_array.length;

  for (var n = 0;n < intLocality;n++)
  {
   intTemp *= locality_array[n];
   
  }
  if (intTemp <= 0)
  {
   intLocality = intTemp;
  }else{
   intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "none";
  }
   intLocality = 1;
  }
 }else{
  intLocality = 0;
 }

 //显示指定层
 if (intDiv != 0 && intLocality >0)
 {
  intDiv = div_array.length;
  intLocality = locality_array.length;
  
  //排序locality_array 数组
  for (var n = 0;n < intLocality;n++)
  {
   intTemp = locality_array[n];
   
   for (var m = n + 1;m < intLocality;m++)
   {
    if (locality_array[n] > locality_array[m])
    {
     locality_array[n] = locality_array[m];
     locality_array[m] = intTemp;
     intTemp = locality_array[n];
    }
   }
  }
  
  intLocality = locality_array.length;
  intTemp = 0;
  
  //
  while (intTemp < intLocality)
  {
   if ((locality_array[intTemp] - 1) < div_array.length)
   {
    intTmp = locality_array[intTemp] - 1;
    document.getElementById(""+ div_array[intTmp] +"").style.display = "block";
   }
   
   intTemp += 1;
  }
 }
 else if(intLocality == 0)
 {//显示所有层
  intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "block";
  }
 }else{//隐藏所有层
  intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "none";
  }
 }
}

这两天又给BLOG换了个衣裳，主要是想改变下那灰色的调调，也许现在看上去感觉更爽一点。

这次修改主要遇到的问题是背景的问题，因为页面是动态的，高度不确定，所以没办法定高度，这在FF的问题就是：当里面的对象浮动时，背景不能填满。看了《CSS布局自适应高度解决方法》一文后，使用了文章里提到的方法，效果不错。

在这里补充一下文章中的方法对IE5/IE5.5的兼容方案：

-----------------------------------------------
#wrap{
height:100%;/*将高设为100％，可同时兼容IE/WIN的几个版本*/
overflow: hidden;/*IE5*/
}
#wrap/*IE5.5+*/{
overflow:hidden !important;/*IE6、FF*/
overflow /*IE5.5*/:visible;/*当高设为100％时，在IE5.5中须把overflow属性设为visible*/
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------

原理就不多说了，这个方法很实用，推荐。

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
先看代码：

-----------------------------------------------
#wrap{
overflow: hidden;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------

实现原理：

块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom（足够大的值）到列的块元素 。
应用margin-bottom（足够大的值）到列的块元素。
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器

IE Mac 5
得到高度正确，所以要过滤掉上面的代码。
/*\*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/
Opera
1. Opera7.0-7.2不能正确清除溢出部分，所以要加：
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/

转自设计中国

公共定义

#show,#show1,#show2,#show3,#show4,#show5,#show6,#show7,#show8{
width:400px;
margin:20px;
padding:20px;
}
.show1,.show2,.show3,.show4,.show5,.show6{
width:400px;
margin:20px;
padding:20px;
}
ID测试1
*>html #demo1#test1 #show1
{
background-color : #999;
color:#fff;
}
id测试2
* html>#demo2 #test2 #show2
{
background-color : #999;
color:#fff;
}
id测试3
* html #demo3>#test3 #show3
{
background-color : #999;
color:#fff;
}
id测试4
* html #demo4 #test4>#show4
{
background-color : #999;
color:#fff;
}
id测试5
* html #demo5>#show5
{
background-color : #999;
color:#fff;
}
id测试6
* html #demo6 #show6
{
background-color : #999;
color:#fff;
}
id测试7
* html #demo7#show7
{
background-color : #999;
color:#fff;
}
小结:从5~6~7时~ ID测试567是一样的~应该是IE5把忽略 >

class测试1
*>html .demo1.test1 .show1
{
background-color : #999;
color:#fff;
}
class测试2
* html>.demo2 .test2 .show2
{
background-color : #999;
color:#fff;
}
class测试3
* html .demo3>.test3 .show3
{
background-color : #999;
color:#fff;
}
class测试4
* html .demo4 .test4>.show4
{
background-color : #999;
color:#fff;
}
class测试5
* html> .demo5 .test5 .show5
{
background-color : #999;
color:#fff;
}
class测试6
* html.demo6 .test6 .show6
{
background-color : #999;
color:#fff;
}
class测试7
.test7.show7
{
margin:20px;border:1px solid #f00;
}
class测试8
.test8 .show8
{
margin:20px;border:1px solid #f00;
}
原来大家的写法
@media tty {
i{content:"\";/*" "*/}};#show
{
background-color : #999;
color:#fff;
}
{;}/*";}
}/* */
总结 IE5会把忽略">" ,而且跟在html后面如果是ID,连着写IE5也是认识的(见class测试6,id测试8), 虽然IE5不能支持">",可是IE6不认识">" 我们就可以利用IE5 和IE6 对">"的不同解析,用他来绕过IE6.
测试环境:windows2000+IE5, window2000 +IE6, window98升级2K+IE5

转自Beautiful Style   演试文件  作者:嗷嗷