CSS三列布局兩端固定寬度中間自適應(yīng)
發(fā)布時間：2014-02-27 15:35:01 作者：佚名 
我要評論
我要評論CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)，下面有個不錯的示例，大家可以參考下
兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)：
<div class="wrap">
<div class="main">
<div class="content"></div>
</div>
<div class="submain">2</div>
<div class="sidebar">3</div>
</div>
.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
.content{height: 50px;margin: 0 150px;background-color: #f60;}
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;}
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}
結(jié)果如下所示：
復(fù)制代碼
代碼如下:<div class="wrap">
<div class="main">
<div class="content"></div>
</div>
<div class="submain">2</div>
<div class="sidebar">3</div>
</div>
復(fù)制代碼
代碼如下:.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
.content{height: 50px;margin: 0 150px;background-color: #f60;}
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;}
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}
結(jié)果如下所示：
相關(guān)文章
這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-06-28- 這篇文章主要介紹了CSS實現(xiàn)頁面兩列布局與三列布局的方法示例,包括寬度與高度的自適應(yīng)的示例,需要的朋友可以參考下2016-06-23
- 這篇文章主要介紹了CSS兩列布局實現(xiàn)方式總結(jié),討論了包括absolute + margin和float + margin方式的一些實踐和問題,需要的朋友可以參考下2016-06-02
橫向兩列布局（左列固定，右列自適應(yīng)）的4種CSS實現(xiàn)方式
這篇文章主要介紹了橫向兩列布局，即左列固定，右列自適應(yīng)的4種CSS實現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-04-27學(xué)習(xí)DIV+CSS網(wǎng)頁布局之兩列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的兩列布局，本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第二篇，感興趣的小伙伴們可以參考一下2016-03-15- CSS兩列布局，右側(cè)固定，左側(cè)自適應(yīng)寬度.2009-11-25
- 在CSS面試題中經(jīng)常會遇到CSS兩列布局的問題，下面給大家分享CSS兩列布局的實現(xiàn)方式，每種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2021-07-27