div絕對居中、寬高自適應、多欄寬度自適應打賞

最近工作上有需求寫一些頁面,很久沒動手了,發現很多排版、樣式等技巧都忘得差不多了,幾番折騰,還算解決了基本的布局問題。下面分享一下常見的幾種div布局問題。

1、div絕對居中。
效果如下:
divposition1
就是固定大小的div在瀏覽器中垂直、水平都居中,適合用到浮動彈出框、頁面居中的登陸框等你想得到的地方。以前我也曾使用window.onload和window.onresize來控制高度自適應,寬度好說,兼容IE和其他主流瀏覽器的,直接文本居中,內部“margin:0 auto;”。

廢話不說,下面是現在的純css解決方法。
以寬高為400px*300px的div居中為例,body內只有div,所以簡寫css如下:

div { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}

完整html源碼如下:

<!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>test</title>
<style>
div { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}
</style>
</head>
<body>
<div></div>
</body>
</html>

這樣就完美實現了絕對居中,另外,如果設計中最外邊框添加了border,div設置了padding等,一定要注意margin值要排除border寬或者padding值。

2、寬高自適應。
效果如下:
divposition2
很多情況下,我們希望頁面的寬高可以自適應,寬度自適應很簡單,當然,這里所說的自適應不是自適應內容,而是自適應瀏覽器,在同一行級只有一個層的情況下,寬度自適應直接使用width:100%;就可以了,但是高度自適應就有些不遂人意了,很多時候設置height:100%;完全不起效,其實,這時完全是因為div所在位置的上級元素沒有指定高度。
同樣以一個div為例,css如下:

html,body { height:100%; width:100%; margin:0; padding:0;}
div { height:100%; width:100%; background:#f90;}

完整html源碼如下:
<!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>test</title>
<style>
html,body { height:100%; width:100%; margin:0; padding:0;}
div { height:100%; width:100%; background:#f90;}
</style>
</head>
<body>
<div></div>
</body>
</html>

這里有一個細節問題嗎,為什么設置body的height為100%的同時還要設置html呢?其實是為了解決firefox的兼容性,firefox默認body占用的不是100%;,這里有一個設計思想就是,如果某個層要用到100%或者其他值的百分比,上一級必須指定高度,當然,這同樣應用到div下的div,具體該怎么寫,大家摸索吧。

3、多欄寬度自適應。
效果如下:
divposition3
前面第二部分已經將過完全的自適應寬高,但其中的寬度自適應只是在一個div獨占一行的情況下,如果出現多個div,如常見的主題部分左右、左中右布局的網站頁面,兩邊固定寬,中間自適應,改怎么寫呢?其實只要在中間部分的div下再套一層div即可,示例css如下:

html,body { height:100px; width:100%; margin:0; padding:0;}
.left { height:100px; width:100px; background:#CC3; float:left;}
.middle { margin:0 50px 0 100px;}
.middle .content { height:100px; width:100%; background:#F60; float:left;}
.right { height:100px; width:50px; background:#09F; float:left;}

完整html源碼如下:

<!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>test</title>
<style>
html,body { height:100px; width:100%; margin:0; padding:0;}
.left { height:100px; width:100px; background:#CC3; float:left;}
.middle { margin:0 50px 0 100px;}
.middle .content { height:100px; width:100%; background:#F60; float:left;}
.right { height:100px; width:50px; background:#09F; float:left;}
</style>
</head>
<body>
<div class="left"></div>
<div class="middle">
<div class="content"></div>
</div>
<div class="right"></div>
</body>
</html>
當然,兩欄以及更多欄目都適應此方法,具體就不再舉例了。

div絕對居中、寬高自適應、多欄寬度自適應
文章《div絕對居中、寬高自適應、多欄寬度自適應》二維碼
  • 微信打賞
  • 支付寶打賞

已有22條評論

  1. 高原雄鷹影視

    嵌入頁面如何寬高自動呢?

    2015-06-26 20:58 回復
    • 樸人博客

      iframe么?iframe用js實現吧

      2015-06-28 10:45 回復
      • 高原雄鷹影視

        不會搞哦,麻煩大俠,哪里有可以直接用的代碼?跪求!

        2015-06-29 09:31 回復
        • 樸人博客

          沒有現成代碼,可以iframe內部找到父容器設置高度等于body高度,或者外部獲取iframe內部body高度自己設置

          2015-06-29 22:16 回復
  2. 涅槃歸來

    3、多欄寬度自適應。有沒有注意到這個在IE6、7下不能正常顯示?有辦法解決嗎?請指點一二……

    2013-04-01 14:41 回復
    • 樸人博客

      不好意思,目前做項目一般不管ie6,因為不是做網站,我們現在做企業應用最低只兼容7.所以有時間自己研究吧。

      2013-04-01 21:08 回復
  3. 涅槃歸來

    第一個絕對居中“left:50%; top:50%; margin-left:-200px; margin-top:-150px”配合默契,但不明原理。其他正在學習中。

    2013-03-27 08:34 回復
    • 樸人博客

      很簡單了。left的第一個像素和top的第一個像素放在屏幕中央,按照div實際寬高,除去一半負值,即為中間

      2013-03-27 20:07 回復
  4. eric

    不錯,學習了!

    2012-12-04 14:43 回復
  5. 不亦樂乎

    這個貌似許多人研究

    2012-11-23 22:41 回復
  6. 好看電影網

    支持一下

    2012-11-13 14:58 回復
  7. Leniy

    content和sidebar之間的上下箭頭按鈕滑動挺好看的

    2012-11-12 08:16 回復
    • 樸人博客

      哪?我博客么?

      2012-11-12 18:48 回復
      • Leniy

        恩。就是左邊這個方框和上下箭頭。配合上一條漸失線,簡約又好看

        2012-11-13 08:12 回復
      • Leniy

        咦,剛剛發的評論呢?

        2012-11-13 08:13 回復
        • 樸人博客

          不知道怎么回事,你的地址或者名稱估計被舉報過,每次都是自動歸為垃圾的。

          2012-11-13 19:28 回復
          • Leniy

            好奇怪,是虛擬主機的ip么?

            2012-11-14 07:51 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖