javascript - 列出响应式类次

标签 javascript jquery html css

我有一个未排序的列表,在全尺寸页面上看起来像这样:

Item 1
Item 2
Item 3
Item 4
Item 5               <some content here>
Item 6
Item 7
Item 8
Item 9

但我希望它转到:

Item 1               Item 4                Item 7
Item 2               Item 5                Item 8
Item 3               Item 6                Item 9

<some content>

在手机的 100% 宽度处。

我有列表和 div 中的“其他内容”来做我需要的,但是关于列表,我应该使用表格,还是有可以与无序列表一起使用的 CSS?

最佳答案

试试这段代码

       ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 300px;
            width: 100%;
        }

        li {
            flex: 1;
            min-height: 100px;
        }

    </style>
</head>

<body>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>

</body>

调整 ul 和 li 的高度以满足您的设计需要

关于javascript - 列出响应式类次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36994365/

相关文章:

javascript - 如何根据对象的值从对象中省略 key 对?

javascript - jQuery 语法不设置对象属性

JQuery 跨浏览器性能 : . animate() on .hover() 超过 100 个 DOM 元素

html - 在不执行 GET 的情况下检查重复内容

html - CSS : put checked icon div on the image div

html - 剩余位置的宽度

javascript - Vue.js 无法使用 querySelector 找到元素

php - 使用 AJAX 发送时事通讯以避免 PHP 超时

php - CodeIgniter 和 JS 库

asp.net - jquery循环IE7透明png问题