橫向兩列布局(左列固定,右列自適應(yīng))的4種CSS實現(xiàn)方式
發(fā)布時間:2016-04-27 11:06:27 作者:佚名
我要評論

這篇文章主要介紹了橫向兩列布局,即左列固定,右列自適應(yīng)的4種CSS實現(xiàn)方式,感興趣的小伙伴們可以參考一下
需要實現(xiàn)橫向兩列布局:左列固定,右列自適應(yīng)的效果,如下圖:
HTML代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>測試練習(xí)</title>
- </head>
- <body>
- <div class="parent">
- <div class="side">側(cè)欄</div>
- <div class="main">主欄</div>
- </div>
- </body>
- </html>
方法一(推薦):使用asolute屬性實現(xiàn),需要注意:固定寬的列的高度>自適應(yīng)寬度列的高度
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- body{
- margin:0;
- padding:0;
- font-size:30px;
- font-weight:bold;
- }
- .parent{
- text-align:center;
- line-height:200px;
- }
- .side{
- position:absolute;left:0;top:0;
- width:200px;
- height:200px;
- background:red;
- }
- .main{
- margin-left:210px;
- background:blue;
- height:200px;
- }
方法二:通過設(shè)置float屬性(使縱向排列的塊級元素,橫向排列)及margin屬性(設(shè)置兩列之間的寬度)
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- body{
- margin:0;
- padding:0;
- font-size:30px;
- font-weight:bold;
- }
- .parent{
- text-align:center;
- line-height:200px;
- }
- .side{
- width:200px;
- height:200px;
- float:left;
- background:red;
- }
- .main{
- height:200px;
- margin-left:210px;
- background:blue;
- }
方法三:使用Flex布局
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- body{
- margin:0;
- padding:0;
- font-size:30px;
- font-weight:bold;
- }
- .parent{
- text-align:center;
- line-height:200px;
- display:flex;
- }
- .side{
- width:200px;
- height:200px;
- background:red;
- margin-right:10px;
- }
- .main{
- background:blue;
- height:200px;
- flex:1;
- }
方法四:利用BFC不與浮動元素重疊的特性
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- body{
- margin:0;
- padding:0;
- font-size:30px;
- font-weight:bold;
- }
- .parent{
- text-align:center;
- line-height:200px;
- }
- .side {
- width: 200px;
- height: 100px;
- float: left;
- background: red;
- margin-right: 10px;
- }
- .main {
- /* 創(chuàng)建BFC */
- overflow: hidden;
- background: blue;
- height: 100px;
- }
以上就是本文的全部內(nèi)容,希望對大家熟練掌握CSS布局技巧有所幫助。
更多閱讀內(nèi)容:
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之一列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之兩列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之三列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之混合布局
相關(guān)文章
- 這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(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
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之兩列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的兩列布局,本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第二篇,感興趣的小伙伴們可以參考一下2016-03-15- CSS三列布局走出HTML布局陰影,兩端固定寬度,中間自適應(yīng)結(jié)構(gòu),下面有個不錯的示例,大家可以參考下2014-02-27
- CSS兩列布局,右側(cè)固定,左側(cè)自適應(yīng)寬度.2009-11-25
- 在CSS面試題中經(jīng)常會遇到CSS兩列布局的問題,下面給大家分享CSS兩列布局的實現(xiàn)方式,每種方法給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧2021-07-27