189 8069 5689

怎么在css中实现多列布局

怎么在css中实现多列布局?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

鹤山ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

一. 定宽 + 自适应

期望效果: 左侧宽度固定, 右侧宽度自适应
公共代码:
html:


    
        

left menu

    
             
  • right item1
  •         
  • right item2
  •         
  • right item3
  •     

    css:

    html, body, p, ul, li {
        margin: 0;
        padding: 0;
    }
    div.left {
        background: #d2e3e3;
    }
    div.right {
        background: #77DBDB;
    }

    方案一: float

    .left {
        float: left;
        width: 100px;
    }
    .right {
        margin-left: 100px; // 或 overflow: hidden
    }

    方案二: table

    .parent {
        display: table;
        width: 100%;
        table-layout: fixed; // https://blog.csdn.net/qq_36699230/article/details/80658742
        .left, .right {
            display: table-cell;
        }
        .left {
            width: 100px;
        }
    }

    方案三: flex

    .parent {
        display: flex;
        .left {
            width: 100px; // 或 flex: 0 0 100px;
        }
        .right {
            flex: 1;
        }
    }
    .parent {
        display: table;
        width: 100%;
        // 设置table-layout: fixed; 会使单元格等宽, 因此此处不设置
        .left, .right {
            display: table-cell;
        }
        .left {
            width: 0.1%; // 宽度设置一个极小值, 由于没有设置table-layout: fixed; 所以宽度由内容决定
            white-space:nowrap;
        }
    }

    二. 等宽(两/多列)布局

    公共代码:
    html

    
        
            

    1

                      

    2

                      

    3

                      

    4

        

    css

    html, body, div, p {
        margin: 0;
        padding: 0;
    }
    .parent {
        width: 800px;
        border: 1px solid coral;
        .column {
            height: 30px;
            background: bisque;
            p {
                background: #f0b979;
                height: 30px;
            }
        }
    }

    方案一: float (个人并不喜欢, 写法很死, 需要知道有多少列, 而且有边框的情况下会超出容器)

    .parent {
        margin-left: -20px;
        overflow: hidden;
        .column {
            float: left;
            width: 25%;
            padding-left: 20px;
            box-sizing: border-box;
        }
    }

    怎么在css中实现多列布局
     

    方案二: flex (推荐)

    .parent {
        display: flex;
        .column {
            flex: 1;
            &+.column {
                margin-left: 10px;
            }
        }
    }

    怎么在css中实现多列布局

    三. 等高布局

    推荐方案:

    .parent {
        display: flex;
    }
    .left, .right {
        flex: 1;
    }

    看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


    新闻名称:怎么在css中实现多列布局
    标题路径:http://cdxtjz.cn/article/pjojcj.html

    其他资讯