css多種方式實現等高布局的示例代碼

2024-07-11 08:59:47

字體：大中小

來源：轉載

供稿：網友

本文講的等高布局是在不手動設置元素高度的情況下，使用純css實現各個元素高度都相當的效果。如圖：

1、使用table-cell實現(兼容IE8)

<style>    body,div,ul,li{margin: 0;padding: 0;}    li{list-style: none;}    .table-layout-container{        width: 50%;        margin: 20px auto;    }    .table-row-layout{        /* 當元素display設置為table-row后，再設置寬度就沒有效果了，因此需要再包裹一層div，然后給它設置寬度 */        display: table-row;    }    .table-cell-layout{        display: table-cell;        width: 33.33%;        padding: 10px;        border: 1px solid #ccc;        border-left: none;    }    .table-cell-layout:first-child{        border-left: 1px solid #ccc;    }</style><body>    <div class="table-layout-container">        <ul class="table-row-layout">            <li class="table-cell-layout">                行業的發展必然帶來職業的細分，在前端領域也一樣，目前行業前端有下面這幾個方向：界面展現用戶體驗和可訪問性方向、                后的js/nodejs開發方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動效創意表現與數據可視化方向、工具建設                文檔管理內部站建設的前端運維方向以及會議預定團建組織對外品牌宣傳的前端運營方向。            </li>            <li class="table-cell-layout">                由于每個人的性格特質，成長經歷的差異，自然適合的方向也不一樣。感性細膩有設計背景可以專注于用戶體驗，純邏輯工程                化思維濃郁則更適合偏后開發，數學物理強悍可以考慮數據可視化方向，溝通協調能力很強可以朝著前端運營方向努力。            </li>            <li class="table-cell-layout">                在學生時代，大家都很純粹，我喜歡這個就學這個，例如，很多女生很喜歡CSS，寫頁面，做效果。但是，等她開始找工作，                還是接觸真實的行業圈子的時候，事情就發生了變化。            </li>        </ul>    </div></body>

2、使用flex布局實現

<style>    body,div,ul,li{margin: 0;padding: 0;}    li{list-style: none;}    .flex-layout{        display: flex;        width: 50%;        margin: 20px auto;    }    .flex-item{        width: 33.33%;        padding: 10px;        border: 1px solid #ccc;        border-left: none;    }    .flex-item:first-child{        border-left: 1px solid #ccc;    }</style><body>    <ul class="flex-layout">        <li class="flex-item">            行業的發展必然帶來職業的細分，在前端領域也一樣，目前行業前端有下面這幾個方向：界面展現用戶體驗和可訪問性方向、偏后的js/nodejs開發方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動效創意表現與數據可視化方向、工具建設文檔管理內部站建設的前端運維方向以及會議預定團建組織對外品牌宣傳的前端運營方向。        </li>        <li class="flex-item">            由于每個人的性格特質，成長經歷的差異，自然適合的方向也不一樣。感性細膩有設計背景可以專注于用戶體驗，純邏輯工程化思維濃郁則更適合偏后開發，數學物理強悍可以考慮數據可視化方向，溝通協調能力很強可以朝著前端運營方向努力。        </li>        <li class="flex-item">            在學生時代，大家都很純粹，我喜歡這個就學這個，例如，很多女生很喜歡CSS，寫頁面，做效果。但是，等她開始找工作，還是接觸真實的行業圈子的時候，事情就發生了變化。        </li>    </ul></body>

3、利用margin實現等高布局(實際開發中不建議使用)

實現上面的等高布局除了可以使用table-cell、flex布局外還可以利用margin負值來實現

<style>    body,div,ul,li{margin: 0;padding: 0;}    li{list-style: none;}    .marign-layout{        width: 50%;        margin: 20px auto;        overflow: hidden;    }    .item{        float: left;        width: 30%;        padding: 10px;        margin-bottom: -9999px;        padding-bottom: 9999px;        border: 1px solid #ccc;        border-left: none;    }    .item:first-child{        border-left: 1px solid #ccc;    }</style><body>    <ul class="marign-layout">        <li class="item">            行業的發展必然帶來職業的細分，在前端領域也一樣，目前行業前端有下面這幾個方向：界面展現用戶體驗和可訪問性方向、偏后的js/nodejs開發方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動效創意表現與數據可視化方向、工具建設文檔管理內部站建設的前端運維方向以及會議預定團建組織對外品牌宣傳的前端運營方向。        </li>        <li class="item">            由于每個人的性格特質，成長經歷的差異，自然適合的方向也不一樣。感性細膩有設計背景可以專注于用戶體驗，純邏輯工程化思維濃郁則更適合偏后開發，數學物理強悍可以考慮數據可視化方向，溝通協調能力很強可以朝著前端運營方向努力。        </li>        <li class="item">            在學生時代，大家都很純粹，我喜歡這個就學這個，例如，很多女生很喜歡CSS，寫頁面，做效果。但是，等她開始找工作，還是接觸真實的行業圈子的時候，事情就發生了變化。        </li>    </ul></body>

使用margin負值有一個缺點，如圖：