鍍金池/ 問答/HTML5  HTML/ css關(guān)于豎向布局的問題

css關(guān)于豎向布局的問題

需求：

一個容器里面有若干直接子元素，豎向排列，假設(shè)固定容器高度只能夠裝下5個。
第6個元素會換到另一列繼續(xù)豎向排序。
請教各位如何用CSS顯示這個布局。

注意：

1、所有元素必須有一個共同的父級容器，不能分成兩列。
2、要兼容IE9，flex用不了。

圖片描述

回答
編輯回答
厭惡我

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>
2018年7月26日 18:51