溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css實(shí)現(xiàn)等高布局的方法有哪些

發(fā)布時(shí)間：2020-10-19 14:22:55 來源：億速云 閱讀：238 作者：小新 欄目：web開發(fā)

css實(shí)現(xiàn)等高布局的方法有哪些？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

使用純css實(shí)現(xiàn)各個(gè)元素高度都相當(dāng)?shù)男ЧＨ鐖D：

css實(shí)現(xiàn)等高布局的方法有哪些

1、使用table-cell實(shí)現(xiàn)(兼容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{
        /* 當(dāng)元素display設(shè)置為table-row后，再設(shè)置寬度就沒有效果了，因此需要再包裹一層div，然后給它設(shè)置寬度 */
        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">
                行業(yè)的發(fā)展必然帶來職業(yè)的細(xì)分，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶體驗(yàn)和可訪問性方向、
                后的js/nodejs開發(fā)方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動(dòng)效創(chuàng)意表現(xiàn)與數(shù)據(jù)可視化方向、工具建設(shè)
                文檔管理內(nèi)部站建設(shè)的前端運(yùn)維方向以及會(huì)議預(yù)定團(tuán)建組織對(duì)外品牌宣傳的前端運(yùn)營方向。
            </li>
            <li class="table-cell-layout">
                由于每個(gè)人的性格特質(zhì)，成長經(jīng)歷的差異，自然適合的方向也不一樣。感性細(xì)膩有設(shè)計(jì)背景可以專注于用戶體驗(yàn)，純邏輯工程
                化思維濃郁則更適合偏后開發(fā)，數(shù)學(xué)物理強(qiáng)悍可以考慮數(shù)據(jù)可視化方向，溝通協(xié)調(diào)能力很強(qiáng)可以朝著前端運(yùn)營方向努力。
            </li>
            <li class="table-cell-layout">
                在學(xué)生時(shí)代，大家都很純粹，我喜歡這個(gè)就學(xué)這個(gè)，例如，很多女生很喜歡CSS，寫頁面，做效果。但是，等她開始找工作，
                還是接觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化。
            </li>
        </ul>
    </div>
</body>

2、使用flex布局實(shí)現(xiàn)

<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">
            行業(yè)的發(fā)展必然帶來職業(yè)的細(xì)分，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶體驗(yàn)和可訪問性方向、偏后
的js/nodejs開發(fā)方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動(dòng)效創(chuàng)意表現(xiàn)與數(shù)據(jù)可視化方向、工具建設(shè)文檔管理內(nèi)部站建設(shè)的
前端運(yùn)維方向以及會(huì)議預(yù)定團(tuán)建組織對(duì)外品牌宣傳的前端運(yùn)營方向。
        </li>
        <li class="flex-item">
            由于每個(gè)人的性格特質(zhì)，成長經(jīng)歷的差異，自然適合的方向也不一樣。感性細(xì)膩有設(shè)計(jì)背景可以專注于用戶體驗(yàn)，純邏輯工程化思
維濃郁則更適合偏后開發(fā)，數(shù)學(xué)物理強(qiáng)悍可以考慮數(shù)據(jù)可視化方向，溝通協(xié)調(diào)能力很強(qiáng)可以朝著前端運(yùn)營方向努力。
        </li>
        <li class="flex-item">
            在學(xué)生時(shí)代，大家都很純粹，我喜歡這個(gè)就學(xué)這個(gè)，例如，很多女生很喜歡CSS，寫頁面，做效果。但是，等她開始找工作，還是接
觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化。
        </li>
    </ul>
</body>

3、利用margin實(shí)現(xiàn)等高布局(實(shí)際開發(fā)中不建議使用)

實(shí)現(xiàn)上面的等高布局除了可以使用table-cell、flex布局外還可以利用margin負(fù)值來實(shí)現(xiàn)

<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">
            行業(yè)的發(fā)展必然帶來職業(yè)的細(xì)分，在前端領(lǐng)域也一樣，目前行業(yè)前端有下面這幾個(gè)方向：界面展現(xiàn)用戶體驗(yàn)和可訪問性方向、偏后
的js/nodejs開發(fā)方向、audio/video音視頻富媒體方向、SVG/canvas/webGL動(dòng)效創(chuàng)意表現(xiàn)與數(shù)據(jù)可視化方向、工具建設(shè)文檔管理內(nèi)部站建設(shè)的
前端運(yùn)維方向以及會(huì)議預(yù)定團(tuán)建組織對(duì)外品牌宣傳的前端運(yùn)營方向。
        </li>
        <li class="item">
            由于每個(gè)人的性格特質(zhì)，成長經(jīng)歷的差異，自然適合的方向也不一樣。感性細(xì)膩有設(shè)計(jì)背景可以專注于用戶體驗(yàn)，純邏輯工程化思
維濃郁則更適合偏后開發(fā)，數(shù)學(xué)物理強(qiáng)悍可以考慮數(shù)據(jù)可視化方向，溝通協(xié)調(diào)能力很強(qiáng)可以朝著前端運(yùn)營方向努力。
        </li>
        <li class="item">
            在學(xué)生時(shí)代，大家都很純粹，我喜歡這個(gè)就學(xué)這個(gè)，例如，很多女生很喜歡CSS，寫頁面，做效果。但是，等她開始找工作，還是接
觸真實(shí)的行業(yè)圈子的時(shí)候，事情就發(fā)生了變化。
        </li>
    </ul>
</body>

使用margin負(fù)值有一個(gè)缺點(diǎn)，如圖：

css實(shí)現(xiàn)等高布局的方法有哪些

底部邊框不見了，因?yàn)楸桓冈氐膐verflow: hidden;切割掉了。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css實(shí)現(xiàn)等高布局的方法有哪些大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手