writing-mode、flex实现css多列布局，从上到下，从左到右

最新推荐文章于 2023-04-25 09:21:44 发布

、不知不觉、

最新推荐文章于 2023-04-25 09:21:44 发布

阅读量1.3k

点赞数 2

分类专栏： HTML html5 CSS

本文链接：https://blog.csdn.net/u010394015/article/details/118307997

版权

需求：实现list从上到下排列，一列三行；余下的另起一列。

效果直接运行html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>多列布局</title>
    <style>
        .container {
            writing-mode: vertical-lr;
            /* 内容从上到下垂直排列，下一垂直行位于上一行右侧 */
            height: 180px;
            /* 必须控制容器高度，宽度自适应 */
            font-size: 0;
            /* 子元素为行内块元素，需要设置父元素font-size为0，否则子元素会有间隙 */
            background-color: lightcyan;
            margin: 0;
            padding: 0;
        }

        .container li {
            display: inline-block;
            /*必须设置为行内块，否则会水平排列*/
            width: 100px;
            height: 50px;
            background-color: bisque;
            text-align: center;
            line-height: 50px;
            writing-mode: horizontal-tb;
            /* 这里必须改成水平，否则文字显示方向不对*/
            margin: 0 10px 10px 0;

最低0.47元/天解锁文章

、不知不觉、

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
writing-mode、flex实现css多列布局，从上到下，从左到右

需求：实现list从上到小排列，一列三行；余下的另起一列。效果直接运行html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>多列布局</title> <style> .container { writing-mode: vertical-lr; .
复制链接

扫一扫