float 實(shí)現(xiàn)三欄布局

whidy 發(fā)布于2019-08-29 11:31 / 2440人閱讀

摘要：配合簡單的結(jié)構(gòu)實(shí)現(xiàn)三欄布局結(jié)構(gòu)如下代碼，重點(diǎn)在于實(shí)現(xiàn)中間欄寬度自適應(yīng)重點(diǎn)

float 配合簡單的 html 結(jié)構(gòu)實(shí)現(xiàn)三欄布局

HTML 結(jié)構(gòu)如下

CSS 代碼，重點(diǎn)在于 overflow: hidden; 實(shí)現(xiàn)中間欄寬度自適應(yīng)

.outer {
    height: 100px;
    border: 1px solid #000;
}
.outer > div {
    height: 100%;
}

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
    background-color: #f00;
}

.right {
    float: right;
    width: 100px;
    margin-left: 20px;
    background-color: #00f;
}

.middle {
    background-color: #000;
    overflow: hidden;  /*重點(diǎn)*/
}

云服務(wù)器 GPU云服務(wù)器三欄布局 html5 三欄布局自定義布局怎么實(shí)現(xiàn) android布局的實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111697.html

相關(guān)文章

實(shí)現(xiàn)三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

golden_hamster 2019-08-02 11:55 評(píng)論0 收藏0
實(shí)現(xiàn)三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

IamDLY 2019-08-29 17:12 評(píng)論0 收藏0
實(shí)現(xiàn)三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

Hegel_Gu 2019-08-23 12:52 評(píng)論0 收藏0
CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

neuSnail 2019-08-30 15:56 評(píng)論0 收藏0
CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

Forelax 2019-08-02 14:31 評(píng)論0 收藏0