国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
DIV CSS 自適應(yīng)布局

兩欄布局，左邊定寬200px，右邊自適應(yīng)。如何實現(xiàn)？
我的第一個反應(yīng)就是：用flex伸縮盒呀，然后balabala...
說完之后，面試官說，還有沒有別的方法？flex有些瀏覽器不支持
嗯...我愣了一下，平常遇到這種問題貌似都是這么寫的...
別的方法？我又想了想。JS?對，JS肯定可以。
然后就說，可以用JS獲取當前窗口寬度，然后減去200px就是右邊的寬度了
面試官：嗯，這樣的確可以，但是布局一般不要用JS，還有沒有別的方法？CSS的
額，這下我完全愣住了好嘛，人也變得有些緊張。還要別的方法啊，什么方法呢？？？
哎呀媽呀，想不出來，腫么辦...
然后面試官看了我半天，十分體諒的說，那我們進行下一個問題吧...
（以上面試官原話記不大請了，但是意思就是這樣~）

回來后，經(jīng)過百度，哇！原來方法如此之多~還如此簡單~
下面就來總結(jié)一下~


一、兩欄布局（左定寬，右自動）
1. float + margin
即固定寬度元素設(shè)置float屬性為left,自適應(yīng)元素設(shè)置margin屬性，margin-left應(yīng)>=定寬元素寬度。
舉例：
HTML代碼：

  1.     <div class='wrap'>
  2.             <div class='wrap_left'>
  3.                     我是左欄
  4.             </div>
  5.             <div class='wrap_right'>
  6.                     我是右欄
  7.             </div>
  8.     </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 margin: 10px;
  7.         }
  8.         .wrap_left{
  9.                 float: left;
  10.                 width: 200px;
  11.                 background-color: red;
  12.         }
  13.         .wrap_right{
  14.                 margin-left: 220px;
  15.                 background-color: green;
  16.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



2.position + margin
即在父標簽設(shè)置position屬性為relative；子標簽中定寬元素設(shè)置position屬性為absolute；自適應(yīng)元素設(shè)置margin屬性，margin-left>=定寬元素寬度。
舉例：
HTML代碼

  1.     <div class='wrap'>
  2.             <div class='wrap_left'>
  3.                     我是左欄
  4.             </div>
  5.             <div class='wrap_right'>
  6.                     我是右欄
  7.             </div>
  8.     </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 margin: 10px;
  7.                 position: relative;
  8.         }
  9.         .wrap_left{
  10.                 position: absolute;
  11.                 width: 200px;
  12.                 background-color: red;
  13.         }
  14.         .wrap_right{
  15.                 margin-left: 220px;
  16.                 background-color: green;
  17.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



3.float + 負margin
即給自適應(yīng)寬度元素定義一個父標簽，并設(shè)置float屬性為left；width為100%；自適應(yīng)寬度元素設(shè)置margin，margin-left應(yīng)>=定寬元素寬度；
固定寬度元素設(shè)置margin-left屬性為負值：-100%；
除此之外應(yīng)注意HTML結(jié)構(gòu)中應(yīng)先寫自適應(yīng)元素，再寫固定寬度元素。
舉例：
HTML代碼

  1. <div class='wrap'>
  2.             <div class='wrap_right'>
  3.                     我是右欄
  4.             </div>
  5.     </div>
  6.            <div class='wrap_left'>
  7.                     我是左欄
  8.     </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 float: left;
  7.                 width: 100%;
  8.         }
  9.         .wrap .wrap_right{
  10.                 margin-left: 220px;
  11.                 background-color: green;
  12.         }
  13.         .wrap_left{
  14.                 float: left;
  15.                 width: 200px;
  16.                 margin-left: -100%;
  17.                 background-color: red;
  18.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



注：使用的float屬性，必要時清除一下浮動。

4.用table布局實現(xiàn)
來自評論里@qazxsw的方法：

  1. <table width='100%' cellspacing='0' cellpadding='0' border='1' height='300'>
  2.     <tr>
  3.         <td width='200' bgcolor='red'></td>
  4.         <td bgcolor='green'></td>
  5.     </tr>
  6. </table>
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com


不過這個方法，一定要設(shè)置高度才可以~


5.觸發(fā)BFC實現(xiàn)   —— 來自評論里柯南同學@15913127081的方法
關(guān)于BFC是什么、怎么觸發(fā)BFC以及BFC可以用來做什么，大家可以看看這篇，前端精選文摘：BFC 神奇背后的原理（我會告訴你我也是才看的么~哈哈~）
實現(xiàn)方法，即為定寬元素設(shè)置float:left;自適應(yīng)寬度元素設(shè)置可以觸發(fā)BFC的屬性。（可以觸發(fā)BFC的屬性？繼續(xù)看上面那個鏈接?。。?br>示例：
HTML代碼：

  1.         <div class='wrap_left'>
  2.                 我是左欄
  3.         </div>
  4.         <div class='wrap_right'>
  5.                 我是右欄
  6.         </div>
復(fù)制代碼


CSS代碼：

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         
  6.         .wrap_left{
  7.                 float: left;
  8.                 width: 200px;
  9.                 background-color: red;
  10.         }
  11.         .wrap_right{
  12.                 overflow: hidden;
  13.                 background-color: green;
  14.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



前面有說到一般我都是用的flex伸縮盒，那也來說一下用flex怎么實現(xiàn)的吧
6.flex伸縮盒方法
即父標簽設(shè)置display:flex屬性，自適應(yīng)元素設(shè)置flex-grow:1;
HTML代碼

  1.     <div class='wrap'>
  2.                 <div class='wrap_left'>
  3.                         我是左欄
  4.                 </div>
  5.             <div class='wrap_right'>
  6.                         我是右欄
  7.                 </div>
  8.         </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 display: flex;
  7.                 display: -webkit-flex;
  8.         }
  9.         .wrap_left{                
  10.                 width: 200px;
  11.                 background-color: red;
  12.         }
  13.         .wrap_right{        
  14.                 flex-grow:1;
  15.                 -webkit-flex-grow:1;
  16.                 background-color: green;
  17.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



進階
二、三欄布局
掌握了上面的方法，我們會發(fā)現(xiàn)制作一個三欄布局也是非常容易的。
下面我們在上面栗子的基礎(chǔ)上，看看實現(xiàn)一個兩側(cè)定寬，中間自適應(yīng)的三欄布局如何實現(xiàn)
1. float + margin（兩側(cè)定寬，中間自適應(yīng)）
HTML代碼：

  1.         <div class='wrap_left'>
  2.                     我是左欄
  3.         </div>
  4.             <div class='wrap_right'>
  5.                     我是右欄
  6.             </div>
  7.         <div class='wrap_content'>
  8.             我是中間欄
  9.         </div>
復(fù)制代碼


CSS代碼：

  1. html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap_left{
  6.                 width: 200px;
  7.                 float: left;
  8.                 background-color: red;
  9.         }
  10.         
  11.         .wrap_content{
  12.                 margin-left: 220px;
  13.                 margin-right: 220px;
  14.                 background-color: yellow;
  15.         }
  16.         .wrap_right{
  17.                 width: 200px;
  18.                 float: right;
  19.                 background-color: green;
  20.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



2. position + margin（兩側(cè)定寬，中間自適應(yīng)）
HTML代碼：

  1. <div class='wrap_left'>
  2.                 我是左欄
  3.     </div>
  4.         <div class='wrap_right'>
  5.                 我是右欄
  6.         </div>
  7.     <div class='wrap_content'>
  8.         我是中間欄
  9.     </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap_left{
  6.                 width: 200px;
  7.                 position: absolute;
  8.                 background-color: red;
  9.                 left: 0;
  10.         }
  11.         
  12.         .wrap_content{
  13.                 margin-left: 220px;
  14.                 margin-right: 220px;
  15.                 background-color: yellow;
  16.         }
  17.         .wrap_right{
  18.                 width: 200px;
  19.                 position: absolute;
  20.                 right: 0;
  21.                 background-color: green;
  22.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



3.float + 負margin（兩側(cè)定寬，中間自適應(yīng)）
HTML代碼

  1. <div class='wrap'>
  2.             <div class='wrap_content'>
  3.                 我是中間欄
  4.             </div>
  5.     </div>
  6.     <div class='wrap_left'>
  7.                 我是左欄
  8.     </div>
  9.         <div class='wrap_right'>
  10.                 我是右欄
  11.         </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 float: left;;
  7.                 width: 100%;
  8.         }
  9.         .wrap_left{
  10.                 width: 200px;
  11.                 float: left;
  12.                 margin-left: -100%;
  13.                 background-color: red;
  15.         }
  16.         
  17.         .wrap_content{
  18.                 margin-left: 220px;
  19.                 margin-right: 220px;
  20.                 background-color: yellow;
  21.         }
  22.         .wrap_right{
  23.                 width: 200px;
  24.                 float: left;
  25.                 margin-left: -200px;
  26.                 background-color: green;
  27.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



4.table實現(xiàn)

  1.         <table width='100%' cellspacing='0' cellpadding='0' border='1' height='300'>
  2.     <tr>
  3.         <td width='200' bgcolor='red'></td>
  4.         <td bgcolor='yellow'></td>
  5.         <td width='200' bgcolor='green'></td>
  6.     </tr>
  7.     </table>
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com



5.BFC方法
HTML代碼

  1.         <div class='wrap_left'>
  2.                 我是左欄
  3.         </div>
  4.     <div class='wrap_right'>
  5.                 我是右欄
  6.         </div>
  7.         <div class='wrap_content'>
  8.                 我是中間欄
  9.         </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         
  6.         .wrap_left{
  7.                 float: left;
  8.                 width: 200px;
  9.                 background-color: red;
  10.         }
  11.         .wrap_right{
  12.                 float: right;
  13.                 width: 200px;
  14.                 background-color: green;
  15.         }
  16.         .wrap_content{
  17.                 overflow: hidden;
  18.                 background-color: yellow;
  19.         }
復(fù)制代碼
運行代碼復(fù)制代碼保存代碼提示：您可以先修改部分代碼再運行!power by W3Cfuns.com


注：HTML中先寫定寬元素，再寫自適應(yīng)寬度元素。

6.flex伸縮盒
即父標簽設(shè)置display:flex屬性，自適應(yīng)元素設(shè)置flex-grow:1;
HTML代碼

  1.     <div class='wrap'>
  2.                 <div class='wrap_left'>
  3.                         我是左欄
  4.                 </div>
  5.                 <div class='wrap_content'>
  6.                         我是中間欄
  7.                 </div>
  8.             <div class='wrap_right'>
  9.                         我是右欄
  10.                 </div>
  11.         </div>
復(fù)制代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 display: flex;
  7.                 display: -webkit-flex;
  8.         }
  9.         .wrap_left{                
  10.                 width: 200px;
  11.                 background-color: red;
  12.         }
  13.         .wrap_right{        
  14.                 width: 200px;
  15.                 background-color: green;
  16.         }
  17.         .wrap_content{
  18.                 flex-grow:1;
  19.                 -webkit-flex-grow:1;
  20.                 background-color: yellow;
  21.         }
復(fù)制代碼
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
CSS布局解決方案（多列布局）
史上最全Html與CSS布局技巧
CSS實現(xiàn)水平居中的幾種方法
CSS 之布局
CSS常見布局解決方案
css-layout（布局研究）之二
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服