“自动换列”的CSS设计

最新推荐文章于 2024-05-24 17:57:30 发布

原创最新推荐文章于 2024-05-24 17:57:30 发布 · 2.4k 阅读

CC 4.0 BY-SA版权

本文探讨了CSS中没有内置的“自动换列”概念，但通过行列转置和内容反方向转置，可以实现类似效果。利用CSS3的transform进行转置，同时注意margin的调整，以及在低版本IE中利用writing-mode属性来改变文本方向，解决兼容性问题。不过，对于性能和低版本IE的兼容，可能存在挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的兼容，但是非要实现并不是不可以。