css多種方式實現等寬佈局

時間 2019-12-10

標籤 css 多種方式實現等寬佈局欄目 CSS 简体版

原文原文鏈接

本文講的等寬佈局是在不手動設置元素寬度的狀況下，使用純css實現各個元素寬度都至關的效果。css

一、使用table-cell實現(兼容ie8)

<style>
    body,div{
        margin: 0;
        padding: 0;
    }
    .table-layout{
        display: table;/*父元素必須設置爲table*/
        table-layout: fixed;/*這個屬性必定要有，不然達不到效果*/
        width: 50%;
        margin: 20px auto;
    }
    .table-cell-layout{
        display: table-cell;/*子元素必須設置爲table-cell*/
        height: 40px;
        border: 1px solid #666;
        border-left: none;
    }
    .table-cell-layout:first-child{
        border-left: 1px solid #666;
    }
</style>

<body>
    <ul class="table-layout">
        <li class="table-cell-layout">li1</li>
        <li class="table-cell-layout">li2</li>
        <li class="table-cell-layout">li3</li>
        <li class="table-cell-layout">li4</li>
        <li class="table-cell-layout">li5</li>
    </ul>
</body>

二、使用flex佈局來實現佈局

<style>
    body,div{
        margin: 0;
        padding: 0;
    }
    .flex-layout{
        display: flex;
        width: 50%;
        margin: 20px auto;
    }
    .flex-item{
        flex: 1;
        height: 40px;
        border: 1px solid #666;
        border-left: none;
    }
    .flex-item:first-child{
        border-left: 1px solid #666;
    }
</style>

<body>
    <ul class="flex-layout">
        <li class="flex-item">li1</li>
        <li class="flex-item">li2</li>
        <li class="flex-item">li3</li>
        <li class="flex-item">li4</li>
        <li class="flex-item">li5</li>
    </ul>
</body>