灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:3931回复:0

CSS+DIV设计实例:实现让多个DIV排列时居中

楼主#
更多 发布于:2011-11-20 07:54



CSS+DIV设计实例:实现让多个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><script language="<a class="channel_keylink" href="http://java.chinaitlab.com/" target="_blank">Java</a>script"> 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>
Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行


喜欢0 评分0
游客

返回顶部