DIV CSS网页布局实例:实现多个DIV排列居中

DIV CSS网页布局实例:实现多个DIV排列居中

<?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>Untitled Document</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}/* for ie*/

html>body #outer {display:table}/*for mozilla */

html>body .inner {display:table;float:left}/*for mozilla */

@media all and (min-width: 0px){/* opera 7 styles */

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

}

</style>

</head>

<body>

<!– force quirks mode by using the xml pro-logue –>

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

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

<?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”>

第 1 2 页

DIV CSS网页布局实例:实现多个DIV排列居中

相关文章:

你感兴趣的文章:

标签云: