本文探讨了CSS中没有内置的“自动换列”概念，但通过行列转置和内容反方向转置，可以实现类似效果。利用CSS3的transform进行转置，同时注意margin的调整，以及在低版本IE中利用writing-mode属性来改变文本方向，解决兼容性问题。不过，对于性能和低版本IE的兼容，可能存在挑战。
CSS中只有自动换行的概念，常规流中的东西如果无法塞入当前行盒子中就会另起新行来放置。但对于列满的情况并没有“自动换列”的概念，因为对于一个容器而言，行盒子只有一列，即使这一列行盒子超出容器的范围，它也只是撑开或超出容器，不会产生新的列。
但实现起来有点猥琐了。既然CSS有自动换行的性质，那么我们把行和列的概念互换不就可以得到“自动换列”了吗？我们需要对行列转置，并且为了保持内容的方向，也需要让内容反方向转置。这可以直接使用CSS3中的transition来做。
<!DOCTYPE html>
<style>
ol {
width:80px;/*表示容器的高度*/
height:450px;/*表示容器的宽度*/
border:1px solid red;overflow:
最低0.47元/天 解锁文章
扫一扫
1467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
