小編給大家分享一下css3如何使用display: table實現(xiàn)多欄布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站云計算的互聯(lián)網(wǎng)服務提供商,擁有超過13年的服務器租用、光華機房服務器托管、云服務器、虛擬空間、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務許可證。專業(yè)提供云主機、虛擬空間、主機域名、VPS主機、云服務器、香港云服務器、免備案服務器等。

假如把下面的三個div顯示在同一行

<div id="parent">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

display: table

display:table     設(shè)置了該屬性的元素作為塊級表格來顯示,類似 <table>。
display:table-cell 設(shè)置了該屬性的元素會作為一個表格單元格顯示，類似 <td> 和 <th>
可以用這一系列table-row-group、table-header-group、table-footer-group、table-row等用其他標簽實現(xiàn)類似于表格的布局。

#parent{
        display: table;
    }
    #parent>div{
        display:table-cell;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

以上是“css3如何使用display: table實現(xiàn)多欄布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：css3如何使用display:table實現(xiàn)多欄布局
當前URL：http://chinadenli.net/article40/gjeseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站改版、App設(shè)計、軟件開發(fā)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)