听中国有声小说,性爱有声小说在线收听,盗墓笔记第二季

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

分享用純CSS實(shí)現(xiàn)三列DIV等高布局的方法

DIV等高布局，我想很多人都遇見(jiàn)過(guò)，我也看過(guò)不少的方法，有的是通過(guò)背景圖片，實(shí)現(xiàn)假象的等高效果；還有的用js實(shí)現(xiàn)等等。這些都是方法，但是現(xiàn)在都不用以上的方法，來(lái)個(gè)真正的純css實(shí)現(xiàn)等高！

成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供東明網(wǎng)站建設(shè)、東明做網(wǎng)站、東明網(wǎng)站設(shè)計(jì)、東明網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、東明企業(yè)網(wǎng)站模板建站服務(wù)，10年東明做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

現(xiàn)在我們來(lái)看看真正的 CSS 實(shí)現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法實(shí)現(xiàn)的。下面來(lái)看看實(shí)際的例子（三列等高），以下面的 XHTML 代碼為例：

html代碼：

 
 
 
  
  
     
  
     
  
  left
   
  
  left
   
  
  left
   
  
  left
   
  
  left

center

right

css代碼：

 
 
 
  
  
      
  
  body, p, ul { margin:0; padding:0; }    
  
  #wrap { overflow:hidden; width:1000px; margin:0 auto; }    
  
  #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }    
  
  #left { float:left; width:250px; background:#00FFFF; }    
  
  #center { float:left; width:500px; background:#FF0000; }    
  
  #right { float:right; width:250px; background:#00FF00; }    
  
     
  
      
  
      
  
      
  
      
  
  CSS等高布局    
  
      
  
  *{    
  
  margin:0;    
  
  padding:0;    
  
  }    
  
  #wrap{    
  
  overflow:hidden;    
  
  width:1000px;    
  
  margin:0 auto;    
  
  }    
  
  #left,#center,#right{    
  
  margin-bottom:-10000px;    
  
  padding-bottom:10000px;    
  
  }    
  
  #left{    
  
  float:left;    
  
  width:250px;    
  
  background:#00FFFF;    
  
  }    
  
  #center{    
  
  float:left;    
  
  width:500px;    
  
  background:#FF0000;    
  
  }    
  
  #right{    
  
  float:right;    
  
  width:250px;    
  
  background:#00FF00;    
  
  }

center

right

當(dāng)前文章：分享用純CSS實(shí)現(xiàn)三列DIV等高布局的方法
文章出自：http://www.fisionsoft.com.cn/article/cdgjjep.html

新聞中心

其他資訊