css关于竖向布局的问题

需求:

一个容器里面有若干直接子元素,竖向排列,假设固定容器高度只能够装下5个。
第6个元素会换到另一列继续竖向排序。
请教各位如何用CSS显示这个布局。

注意:

1、所有元素必须有一个共同的父级容器,不能分成两列。
2、要兼容IE9,flex用不了。

图片描述

阅读 2.5k
1 个回答

writing-mode 了解一下

<!DOCTYPE html>
<html>

<head>
    <style>
        #mainBox {
            border: 1px #f00 solid;
            width: 300px;
            height: 250px;
            writing-mode: tb-lr;/*IE写法*/
            writing-mode: vertical-lr;
        }

        #mainBox a {
            margin: 5px;
            padding: 0px;
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px #00f solid;
            writing-mode: lr-tb;
        }
    </style>
</head>

<body>
    <div id="mainBox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
    </div>
</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题