欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

XML/HTML Code復制內(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復制內(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è)定寬稍有不同，雖然只是定寬的位置換了，但是不能直接使用浮動像左側(cè)定寬那種方式完成。

3、左右定寬-中間自適應(yīng)
XML/HTML Code復制內(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è)定寬及左右定寬等布局的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評論