DIV教程之网页制造技能:DIV宽度100%DIV居中

显示全部楼层 · 发表于 2015-1-15 22:58:36

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
破洛洛文章简介：div宽度100%，外部元素浮动，div居中.
01.<divclass="pagelist_b">
02.<divclass="page">
03.<spanclass="totlerecord">5</span>
04.<spanclass="totlepages">1/5</span>
05.<spanclass="current">1</span>
06.<ahref="#">2</a>
07.<ahref="#">3</a>
08.<ahref="#">4</a>
09.<ahref="#">5</a>
10.<ahref="#">></a>
11.</div>
12.</div>

在这个布局中，“.pagelist_b”是内部框架，100%宽度。而目标，是为了让“.page”块可以居中显现。但是由于“.page”块中的节点其实不流动，没法确认其终极宽度，再者，“.page”块中的内容必要界说特别的款式，而被附上“display:block;”属于将其块元素化，而招致“.page”中的内容没法完善的居中。
这两天俄然偶然中看到网上的相干文章，想起了position:relative;（绝对浮动）的弄法。大抵十分普通的申明一下这里的思绪：“.page”向右浮动50%，是之外层“.pagelist_b”的宽度为尺度的；内层（如A,SPAN）向左浮动50%，是以层“.page”的宽度为尺度的，这里无需界说内层的宽度。如许算是一个小技能，让“.page”居中了。也补足了float没有center属性的缺点。假如没法一般显现，记得在page_b加多一句overflow:visible;
01.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<htmlxmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
05.<metahttp-equiv="Content-Language"content="utf-8"/>
06.<title>newdocument</title>
07.<metaname="robots"content="all"/>
08.<metaname="generator"content="editplus"/>
09.<metaname="author"content="hayden@yeah.net,hayden"/>
10.<metaname="keywords"content=""/>
11.<metaname="description"content=""/>
12.<linkrel="stylesheet"rev="stylesheet"href=""type="text/CSS"media="all"/>
13.<scripttype="text/javascript"src=""></script>
14.<styletype="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..pagespan{position:relative;left:-50%;border:1pxsolid#ddd;display:inline;float:left;padding:06px;height:30px;line-height:30px;margin:2px;}
20..pagespan.totlerecord{}
21..pagespan.current{cursor:pointer;}
22..pagea:link,.pagea:visited{border:1pxsolid#ccc;display:inline;float:left;padding:06px;height:30px;line-height:30px;margin:2px;text-decoration:none;position:relative;left:-50%;color:#666}
23..pagea:hover{border:1pxsolid#666;}
24.
25.</style>
26.</head>
27.<body>
28.
29.
30.<divclass="pagelist_b">
31.<divclass="page">
32.<spanclass="totlerecord">5</span>
33.<spanclass="totlepages">1/5</span>
34.<spanclass="current">1</span>
35.<ahref="#">2</a>
36.<ahref="#">3</a>
37.<ahref="#">4</a>
38.<ahref="#">5</a>
39.<ahref="#">></a>
40.</div>
41.</div>
42.
43.</body>
44.</html>
</p>
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之网页制造技能:DIV宽度100%DIV居中

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子