溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“CSS實現(xiàn)三列DIV等高布局的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS實現(xiàn)三列DIV等高布局的方法”吧!
DIV等高布局，我想很多人都遇見過，我也看過不少的方法，有的是通過背景圖片，實現(xiàn)假象的等高效果；還有的用js實現(xiàn)等等。這些都是方法，但是現(xiàn)在都不用以上的方法，來個真正的純css實現(xiàn)等高！
現(xiàn)在我們來看看真正的 CSS 實現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補丁”和“負外補丁”結合的方法實現(xiàn)的。 下面來看看實際的例子（三列等高），以下面的 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代碼：
<style type="text/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; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS等高布局</title> <style type="text/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; }</style> </head> <body> <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> </body> </html>
到此，相信大家對“CSS實現(xiàn)三列DIV等高布局的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
