網(wǎng)頁制作技巧:DIV寬度100%DIV居中

2024-07-11 09:02:09

字體：大中小

供稿：網(wǎng)友

武林網(wǎng)(www.survivalescaperooms.com)文章簡介：div寬度100%，內(nèi)部元素浮動，div居中.

01.<div class="pagelist_b">
02.    <div class="page">
03.        <span class="totlerecord">5</span>
04.        <span class="totlepages">1/5</span>
05.        <span class="current">1</span>
06.        <a href="#">2</a>
07.        <a href="#">3</a>
08.        <a href="#">4</a>
09.        <a href="#">5</a>
10.        <a href="#">></a>
11.    </div>
12.</div>

在這個結(jié)構(gòu)中，“.pagelist_b”是外部框架，100%寬度。而目的，是為了讓“.page”塊能夠居中顯示。可是因為“.page”塊中的節(jié)點并不固定，無法確認其最終寬度，再者，“.page”塊中的內(nèi)容需要定義特殊的樣式，而被附上“display:block;”屬于將其塊元素化，而導(dǎo)致“.page”中的內(nèi)容無法完美的居中。

這兩天突然無意中看到網(wǎng)上的相關(guān)文章，想起了position:relative;（相對浮動）的玩法。大致非常通俗的說明一下這里的思路：“.page”向右浮動50%，是以外層“.pagelist_b”的寬度為標準的；內(nèi)層（如A,SPAN）向左浮動50%，是以層“.page”的寬度為標準的，這里無需定義內(nèi)層的寬度。這樣算是一個小技巧，讓“.page”居中了。也補足了float沒有center屬性的缺陷。如果無法正常顯示，記得在page_b加多一句overflow:visible;

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
02.<html xmlns="">
03. <head>
04.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.    <meta http-equiv="Content-Language" content="utf-8" />
06.    <title> new document </title>
07.    <meta name="robots" content="all" />
08.    <meta name="generator" content="editplus" />
09.    <meta name="author" content="hayden@yeah.net,hayden" />
10.    <meta name="keywords" content="" />
11.    <meta name="description" content="" />
12.    <link rel="stylesheet" rev="stylesheet" href="" type="text/css" media="all" />
13.    <script type="text/javascript" src=""></script>
14.    <style type="text/css">
15.* { word-wrap: break-word; margin: 0; padding: 0;}
16.
17..pagelist_b {width:100%;height:80px;text-align: center; }
18..page {position:relative;left:50%;float:left;}
19..page span {position:relative;left:-50%;border: 1px solid #ddd;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}
20..page span.totlerecord{}
21..page span.current{cursor:pointer;}
22..page a:link,.page a:visited {border: 1px solid #ccc;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;text-decoration: none;position:relative;left:-50%;color:#666}
23..page a:hover {border:1px solid #666;}
24.
25.    </style>
26. </head>
27. <body>
28.
29.
30.<div class="pagelist_b">
31.    <div class="page">
32.        <span class="totlerecord">5</span>
33.        <span class="totlepages">1/5</span>
34.        <span class="current">1</span>
35.        <a href="#">2</a>
36.        <a href="#">3</a>
37.        <a href="#">4</a>
38.        <a href="#">5</a>
39.        <a href="#">></a>
40.    </div>
41.</div>
42.
43. </body>
44.</html>