懒人听书,怎样写网络小说

新聞中心

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

純CSS實(shí)現(xiàn)三列DIV等高布局方法揭秘

本文和大家重點(diǎn)討論一下如何使用純CSS實(shí)現(xiàn)三列DIV等高布局，現(xiàn)在我們來看看真正的CSS實(shí)現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法實(shí)現(xiàn)的。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的柏鄉(xiāng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

純CSS實(shí)現(xiàn)三列DIV等高布局

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

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

html代碼：

 
 
   
  
     
  
     
  
  left
   
  
  left
   
  
  left
   
  
  left
   
  
  left

center

right

css代碼：

 
 
   
  
     
  
     
  
  body,p,ul{margin:0;padding:0;}    
  
  #wrap{overflow:hidden;width:1000px;margin:0auto;}    
  
  #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;}

#p#完整代碼如下：

 
 
   
  
    
  
  
   
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  
     
  
     
  
     
  
  CSS等高布局   
  
     
  
  *{    
  
  margin:0;    
  
  padding:0;    
  
  }    
  
  #wrap{    
  
  overflow:hidden;    
  
  width:1000px;    
  
  margin:0auto;    
  
  }    
  
  #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;    
  
  }    
  
     
  
     
  
     
  
     
  
     
  
  left
   
  
  left
   
  
  left
   
  
  left
   
  
  left

center

right

文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/css_example/858.shtml)

【編輯推薦】

ASP.NET2.0中CSS失效解決方案
CSS樣式表特點(diǎn)及嵌入網(wǎng)頁的四種途徑
三種方法實(shí)現(xiàn)CSS樣式表插入
CSS外邊距設(shè)置屬性margin用法
探究CSS高級(jí)語法中選擇器分組和CSS繼承用法

新聞名稱：純CSS實(shí)現(xiàn)三列DIV等高布局方法揭秘
文章地址：http://fisionsoft.com.cn/article/cdcjjog.html

新聞中心

其他資訊