亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

table-cell完成左側(cè)定寬，右側(cè)定寬及左右定寬等布局的實(shí)現(xiàn)方法

  發(fā)布時(shí)間：2016-05-26 09:42:07   作者：佚名   我要評(píng)論
下面小編就為大家?guī)硪黄猼able-cell完成左側(cè)定寬，右側(cè)定寬及左右定寬等布局的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

使用table-cell完成以下幾種布局（ie8及以上兼容）

1、左側(cè)定寬-右側(cè)自適應(yīng)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. .left{   
  2.             width: 300px;   
  3.             height: 500px;   
  4.             border: 1px solid;   
  5.             float: left;   
  6.       }   
  7. .right{   
  8.             width: 10000px;   
  9.             height: 500px;   
  10.             display: table-cell;   
  11.             border: 1px solid;   
  12.       }   
  13.     </style>  
  14.   
  15.   
  16. <div class="left"></div>  
  17. <div class="right">  
  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint.   
  19. </div>  

效果如下：

（調(diào)整窗口大小，來測試右側(cè)是否根據(jù)窗口大小改變）

2、右側(cè)定寬-左側(cè)自適應(yīng)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>  
  2.         .right{   
  3.             width: 200px;   
  4.             height: 500px;   
  5.             border: 1px solid;   
  6.             display: table-cell;   
  7.         }   
  8.         .left{   
  9.             height: 500px;   
  10.             border: 1px solid;   
  11.             display: table-cell;   
  12.         }   
  13.         .parent{   
  14.             display: table;   
  15.             table-layout: fixed;   
  16.             width: 100%;   
  17.         }   
  18. </style>  
  19.   
  20. <div class="parent">  
  21.     <div class="left">  
  22.             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, in inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam.   
  23.     </div>  
  24.     <div class="right"></div>  
  25. </div>  

效果如下：

與左側(cè)定寬稍有不同，雖然只是定寬的位置換了，但是不能直接使用浮動(dòng)像左側(cè)定寬那種方式完成。

3、左右定寬-中間自適應(yīng)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>  
  2.        .parent{   
  3.            display: table;   
  4.            table-layout: fixed;   
  5.            width: 100%;   
  6.        }   
  7.         div{   
  8.             border: 1px solid;   
  9.         }   
  10.         .left,.right,.center{   
  11.             display: table-cell;   
  12.         }   
  13.         .left{   
  14.             width: 100px;   
  15.             height: 200px;   
  16.         }   
  17.         .right{   
  18.             width: 100px;   
  19.             height: 200px;   
  20.         }   
  21. </style>  
  22.   
  23.  <div class="parent">  
  24.       <div class="left"></div>  
  25.         <div class="center">  
  26.        　　Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde,    
  27. 　　　　　　ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae!   
  28.         </div>  
  29.       <div class="right"></div>  
  30. </div>  

效果如下：

以上這篇table-cell完成左側(cè)定寬，右側(cè)定寬及左右定寬等布局的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • css九宮格布局的五種方法

    本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn)，感興趣的可以了解下
    2023-09-18

  • CSS實(shí)現(xiàn)元素水平垂直居中的幾種方法

    在Web開發(fā)中，經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動(dòng)手試一試
    2023-09-08

  • css實(shí)現(xiàn)元素居中的6種方法

    相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評(píng)論區(qū)交流
    2023-09-07

  • flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐

    最近需要做個(gè)換行的布局，本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需
    2022-06-16

  • CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別

    今天看到有朋友留言問浮動(dòng)和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考
    2021-09-23

  • css實(shí)現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法

    這篇文章主要介紹了div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2021-01-21

  • waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)

    這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2021-01-19

  • 頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法

    這篇文章主要介紹了頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來
    2020-11-27

  • css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式

    這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-28

最新評(píng)論