您的位置：首页 > 其它

多个DIV排列时居中

2013-10-30 14:02 239 查看

<?xml version="1.0"
encoding="iso-8859-1"?>

<!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>

<title>多个DIV排列时居中
</title>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<style type="text/css">

body {text-align:center}

#outer {

width:60%;

background:#ffffcc;

margin:auto;

text-align:center;

}

.inner {

width:100px;

height:100px;

margin:5px;

border:1px
solid #000;

}

* html .inner {display:inline}

html>body #outer {display:table}

html>body .inner {display:table;float:left}

@media all and (min-width: 0px){

html>body .inner
{display:inline-block;float:none;}

}

</style>

</head>

<body>



<div id="outer">

<div
class="inner">test</div>

<div
class="inner">2</div>

<div
class="inner">3</div>

<div
class="inner">4</div>

<div
class="inner">5</div>

<div
class="inner">6</div>

<div
class="inner">7</div>

<div
class="inner">8</div>

<div
class="inner">9</div>

<div
class="inner">10</div>

<div
class="inner">11</div>

<div
class="inner">12</div>

<div
class="inner">13</div>

<br style="clear:both"
/>

</div>

</body>

</html>

<script language="Javascript">

var now = new Date();

document.write("<img
src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+
now.getTime() +
"&cur="+escape(document.URL)+"' border='0' alt=''
width='0' height='0'>");

</script>

<noscript>

<img
src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter"
border='0' width='0' height='0'/>

</noscript>test
2
3
4
5
6
7
8
9
10
11
12
13

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航