Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

“自动换列”的CSS设计

  CSS中只有自动换行的概念,常规流中的东西如果无法塞入当前行盒子中就会另起新行来放置。但对于列满的情况并没有“自动换列”的概念,因为对于一个容器而言,行盒子只有一列,即使这一列行盒子超出容器的范围,它也只是撑开或超出容器,不会产生新的列。
  那么,可以让元素使用多栏布局,并且“自动换列”吗?可以的

  但实现起来有点猥琐了。既然CSS有自动换行的性质,那么我们把行和列的概念互换不就可以得到“自动换列”了吗?我们需要对行列转置,并且为了保持内容的方向,也需要让内容反方向转置。这可以直接使用CSS3中的transition来做。
<!DOCTYPE html>
<style>
ol {
  width:80px;/*表示容器的高度*/
  height:450px;/*表示容器的宽度*/
  border:1px solid red;overflow:hidden;padding:0px;margin:0px;
  margin-bottom:-370px;/*这个值为width-height*/
  -webkit-transform-origin:0px 0px;
  transform-origin:0px 0px;
  -webkit-transform:rotate(-90deg) translate(-80px/*这个值为负的width*/);
  transform:rotate(-90deg) translate(-80px/*这个值为负的width*/);
}
li {
  width:150px;height:150px;/*这两个值相等,表示子项的宽度*/
  margin-right:-130px;/*这个值为lineHeight-width*/
  line-height:20px;
  list-style-position:inside;float:right;
  -webkit-transform-origin:0px 0px;
  transform-origin:0px 0px;
  -webkit-transform:rotate(90deg) translateY(-20px/*这个值为lineHeight*/);
  transform:rotate(90deg) translateY(-20px/*这个值为lineHeight*/);
}
</style>
<ol id="list"></ol>
<input type="button" value="添加项" id="btn" />
<script>
btn.onclick=function(){
  var li=document.createElement("li");
  li.innerHTML=Date.now();
  list.appendChild(li);
};
</script>
  转置会带来一些副作用,我们需用用margin来调整。另外由于容器是转置的,所以实际上width表示高度、height表示宽度。
  最后是关于低版本IE的兼容问题,我们只用了一些CSS3的变换,这些操作在IE上使用滤镜也能实现,只是性能可能跟不上。但是IE中有其特有的writing-mode样式,它可以直接修改文本的方向,而不需要转置每一个子元素。具体的代码我就不写了,这东西我压根就没打算做低版本IE的兼容,但是非要实现并不是不可以。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^