中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

純CSS實現三列DIV等高布局的方法

發布時間:2021-06-18 14:16:50 來源:億速云 閱讀:131 作者:chen 欄目:web開發

本篇內容主要講解“純CSS實現三列DIV等高布局的方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“純CSS實現三列DIV等高布局的方法”吧!

純CSS實現三列DIV等高布局

DIV等高布局,我想很多人都遇見過,我也看過不少的方法,有的是通過背景圖片,實現假象的等高效果;還有的用js實現等等。這些都是方法,但是現在都不用以上的方法,來個真正的純css實現等高!

現在我們來看看真正的CSS實現的等高布局,其方法主要是采用“隱藏容器溢出”、“正內補丁”和“負外補丁”結合的方法實現的。下面來看看實際的例子(三列等高),以下面的XHTML代碼為例:

html代碼:

<div id="wrap"> <div id="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <div id="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div id="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div>

css代碼:

<styletypestyletype="text/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;}

完整代碼如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>CSS等高布局</title> <styletypestyletype="text/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;  }  </style> </head> <body> <dividdivid="wrap"> <dividdivid="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <dividdivid="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <dividdivid="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> </body> </html>

到此,相信大家對“純CSS實現三列DIV等高布局的方法”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

济阳县| 景宁| 常德市| 柘荣县| 磐石市| 舒兰市| 永寿县| 利辛县| 万荣县| 普安县| 鹤峰县| 晋州市| 博罗县| 封开县| 页游| 孟连| 周至县| 文安县| 台前县| 舟曲县| 广平县| 逊克县| 多伦县| 德州市| 莒南县| 宜黄县| 磐安县| 海门市| 讷河市| 隆林| 台北县| 景洪市| 凌云县| 阜阳市| 怀安县| 盐边县| 新泰市| 改则县| 醴陵市| 徐州市| 百色市|