你将如何做到这一点：表或CSS？

谜题http://sontag.ca/TheChallenge/tiles.gif Grinch gif/grinch.gif

第一部分

这个布局可以简单地用2个HTML表格，一个嵌套在另一个里面，或者甚至用一个表格来完成。

它也可以用CSS来完成，尽pipe它可能会涉及更多的思考 。

这可能不是一个真正的世界布局，但我看到了类似的页面。 考虑这个谜语; 一个练习来增加你的CSS技能。

为了使事情变得更有趣，我在一个名为“挑战”的小小的2页网页中构思了这个问题。 我们将检查代码和问题： 使用表格或CSS进行布局？ 并肩作战，因为我们的两个对手争夺代码霸权。

第一部分展示了挑战是如何成为的。 我希望你喜欢。

第二部分是决定 。 你可能会感到惊讶 。

第二部分

我非常惊讶于我发布后几分钟才出现真正的好答案。 这是一个卑鄙的经历。 我不想和你一起在时间上竞争。

但是，所有这一切，只要仔细研究提供的解决scheme，我就意识到CSS解决scheme（包括我自己在当时）没有任何解决scheme和所提供的任何解决scheme一样好。 挑战是关于CSS比任何布局解决scheme都要好。

所以我增加了3个新的规则（请记住，其中一个规则是规则可以改变）。 这让一些人恼火。 于是我又添加了一些关于为什么改变规则的丰富的解释。 我觉得这让他们更加恼火。

  1. 我们的花园是围着它的围栏; 有些东西可以将它与它可能发现的任何沉闷的环境区分开来; 而不是太贵，但容易保持清洁。 所以我想要一个1像素的黑色边框在花园周围
  2. 每个花园小区（人物）的居民必须是黑色或白色，取决于哪一个显示他们在他们的花园里最好的。 他们也都是草书的后裔。 他们没有斜体。 😉
  3. 花园是可重新定位的，也就是说，我可以在页面的任何地方都有这个花园（没有绝对的定位）。

这是最终的输出是什么样子（背景颜色可选）：

替代文字http://sontag.ca/gif/garden.gif

我为反复无常和最后一刻的规则变化而道歉。 我错了。 每个园地的居民都是工匠，手工制作的专家。 他们是草书家族的后代，对斜体有他们的风格感。

花园必须可以重新定位，因为两种花园（桌子和CSS）需要在同一页面上共存 。 我说这个position:absolute可能是错的position:absolute规则是不允许的。 如果你能让他们在这方面工作，那么更多的权力给你。 他们一定会被接受。

我要求围绕这个阴谋的围栏，因为每个花园types将被种植在一个橙色的背景，非常类似于我们成长的一些花的颜色。

我现在住在荷兰，郁金香季节快到了。 如果你在接下来的几个星期飞越荷兰，而且这是一个晴朗的日子（这里很less见），那么你下面的景观将会看起来与这个愚蠢的运动非常相似。

我对橘子不是很生气，但是我喜欢和欣赏荷兰人，所以我们有一个橙色的背景，对我的东道国表示敬意。 🙂

第三部分

我已经把这个图片的“挑战”下面的Ted的答案贴出来

替代文字http://sontag.ca/gif/garden2.gif

因为居民可以很容易地添加到花园的情节，而不会触及CSS规则 – 一切都自动居中。

你可以用 CSS 做这个 吗？ 你能用鲱鱼砍掉森林里最强壮的树吗？

更新 ：查理的答案在这里。

更新： 最终编辑。 切换到STRICT DTD，删除斜体以匹配问题中的图像，然后恢复为全色名称，以便根据OP对问题的评论显示意图，并将css中的id名称主列按其出现的顺序sorting在html中。

我也select不重复使用外部的div作为白色的7格（ 以前的编辑没有它自己的div），因为如果你想使用布局是不实际的，感觉有点像作弊（尽pipe从简洁/像素完美的angular度来看，我喜欢它的脸颊）。

在这里查看： http : //jsbin.com/efidi
编辑在这里： http : //jsbin.com/efidi/edit
validation为XHTML严格 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>The Challenge</title> <style type="text/css"> div { text-align: center; width:175px; height:175px; line-height: 35px;} div div { float:left; width: 35px; height: 35px;} #orange, #maroon, #blue , #green {float:right;} #orange, #silver {background-color:silver; width:140px;} #navy , #maroon {background-color:maroon; height:140px; line-height:140px;} #navy {background-color:navy ;} #green , #red {background-color:red ; width: 70px;} #yellow, #blue {background-color:blue ; height: 70px; line-height: 70px;} #yellow {background-color:yellow;} #white {background-color:white ;} #green {background-color:green ;} #orange {background-color:orange;} </style> </head> <body> <div> <div id="silver">1</div> <div id="maroon">2</div> <div id="navy" >3</div> <div id="red" >4</div> <div id="blue" >5</div> <div id="yellow">6</div> <div id="white" >7</div> <div id="green" >8</div> <div id="orange">9</div> </div> </body></html>

除此之外，如果可以的话，我可能会多加一些空格，但是在这里的代码块开始变成滚动条之前，我已经select了将它全部显示在屏幕上。

注意：我借用了Tyson的line-height修正（谁是第一个得到正确的渲染答案）。

这里有三个解决scheme。

标记： 

 <div id="outer"> <div id="a1">1</div> <div id="a2">2</div> <div id="a3">3</div> <div id="a4">4</div> <div id="a5">5</div> <div id="a6">6</div> <div id="a7">7</div> <div id="a8">8</div> <div id="a9">9</div> </div>

基本样式表（尺寸和颜色）： 

 #outer { width: 20em; height: 20em; } #a1 { background-color: #C0C0C0; width: 80%; height: 20%; } #a2 { background-color: #800000; width: 20%; height: 80%; } #a3 { background-color: #000080; width: 20%; height: 80%; } #a4 { background-color: #FF0000; width: 40%; height: 20%; } #a5 { background-color: #0000FF; width: 20%; height: 40%; } #a6 { background-color: #FFFF00; width: 20%; height: 40%; } #a7 { background-color: #FFFFFF; width: 20%; height: 20%; } #a8 { background-color: #008000; width: 40%; height: 20%; } #a9 { background-color: #FFA500; height: 20%; width: 80%; }

而现在的定位：

  • 使用float ： 

     #a1 { float: left; } #a2 { float: right; } #a3 { float: left; } #a4 { float: left; } #a5 { float: right; } #a6 { float: left; } #a7 { float: left; } #a8 { float: right; } #a9 { float: right; }

  • 使用position ： 

     #outer { position: relative; } #outer div { position: absolute; } #a1 { top: 0; left: 0; } #a2 { top: 0; right: 0; } #a3 { top: 20%; left: 0; } #a4 { top: 20%; left: 20%; } #a5 { top: 20%; right: 20%; } #a6 { top: 40%; left: 20%; } #a7 { top: 40%; left: 40%; } #a8 { bottom: 20%; right: 20%; } #a9 { bottom: 0; right: 0; }

  • 使用margin ： 

     #a1 { } #a2 { margin: -20% -80% 0 80%; } #a3 { margin: -60% 0 0 0; } #a4 { margin: -80% -20% 0 20%; } #a5 { margin: -20% -60% 0 60%; } #a6 { margin: -20% -20% 0 20%; } #a7 { margin: -40% -40% 0 40%; } #a8 { margin: 0 -40% 0 40%; } #a9 { margin: 0 -20% 0 20%; }

在这里你可以看到，比任何滥用表格标签的行都可以提供： 

 <img src="http://sontag.ca/TheChallenge/tiles.gif" alt="nine assorted coloured rectangles" />

：P

这与您的表格示例完全匹配，包括垂直和水平居中的文本（迄今为止没有人做过）。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Boxy Boxes in a Box</title> <style type="text/css" media="screen"> #container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; } .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;} #box_1 {top: 0; left: 0; width: 140px; background-color: silver;} #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;} #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;} #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;} #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;} #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;} #box_7 {top: 70px; left: 70px; background-color: white;} #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;} #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;} </style> </head> <body> <div id="container"> <div id="box_1" class="box">1</div> <div id="box_2" class="box">2</div> <div id="box_3" class="box">3</div> <div id="box_4" class="box">4</div> <div id="box_5" class="box">5</div> <div id="box_6" class="box">6</div> <div id="box_7" class="box">7</div> <div id="box_8" class="box">8</div> <div id="box_9" class="box">9</div> </div> </body> </html>

只要宽度和高度不变，就可以使用绝对定位来获得相同的效果。 这应该是显而易见的，所以我不必打出来（这是迟到了，我很懒：P）

我采取了一种稍微不同的方法，比迄今为止所见到的“id everything”解决scheme。 这比基于表格的解决schemeless了100个字符以上。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>The Challenge</title> <style type="text/css"> div { position:absolute; width:35px; height:35px; text-align:center; line-height:35px } .spiral { width:175px; height:175px } .t { top:0 } .l { left:0 } .r { right:0 } .b { bottom:0 } .w { width:140px } .h { height:140px; line-height:140px } .c { top:35px; left:35px; width:105px; height:105px } .c .w { width:70px } .c .h { height:70px; line-height: 70px } .c .c { width:35px; height: 35px } </style> </head> <body> <div class="spiral"> <div class="tlw" style="background-color:silver">1</div> <div class="trh" style="background-color:maroon">2</div> <div class="blh" style="background-color:navy">3</div> <div class="c"> <div class="tlw" style="background-color:red">4</div> <div class="trh" style="background-color:blue">5</div> <div class="blh" style="background-color:yellow">6</div> <div class="c">7</div> <div class="brw" style="background-color:green">8</div> </div> <div class="brw" style="background-color:orange">9</div> </div> </body> </html>

编辑：根据你的修改，我发布了一个稍微更详细但希望更清晰的解决scheme，增加了一个黑色的边框，设置一些文本为白色，并不绝对定位“花园”。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>The Challenge</title> <style type="text/css"> div { position:absolute; width:35px; height:35px; text-align:center; line-height:35px } div.spiral { position:relative; width:175px; height:175px; border: 1px solid #000 } .top { top:0 } .left { left:0 } .right { right:0 } .bottom { bottom:0 } .wide { width:140px } .tall { height:140px; line-height:140px } .center { top:35px; left:35px; width:105px; height:105px } .center .wide { width:70px } .center .tall { height:70px; line-height: 70px } .center .center { width:35px; height: 35px } </style> </head> <body> <div class="spiral"> <div class="top left wide" style="background-color:silver">1</div> <div class="top right tall" style="background-color:maroon">2</div> <div class="bottom left tall" style="background-color:navy;color:#fff">3</div> <div class="center"> <div class="top left wide" style="background-color:red">4</div> <div class="top right tall" style="background-color:blue">5</div> <div class="bottom left tall" style="background-color:yellow">6</div> <div class="center">7</div> <div class="bottom right wide" style="background-color:green">8</div> </div> <div class="bottom right wide" style="background-color:orange">9</div> </div> </body> </html>

目前还没有人提供过表格解决scheme，挑战是在受控（严重偏颇）的情况下，将CSS布局与基于表格的布局进行比较。

所以这里是泰德的桌面布局解决scheme和他的挑战…

“使用我的桌面解决scheme，通过非常简单地添加HTML标记就可以很容易地将新的居民添加到花园地块中！所有居民都自动居中并以令人愉悦的方式间隔开来，例如：”

替代文字http://sontag.ca/gif/bluefish.gif 替代文字http://sontag.ca/gif/garden2.gif

“据我所知，这里没有任何基于CSS的解决scheme可以容纳新的居民，而没有对CSS规则进行大规模的改造。”

“最好带很多钱的男孩，我现在感到非常饥渴。” 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Terrible Ted's Table Layout</title> <style type="text/css"> #master TD { text-align: center } #master { border: 1px solid black; font: italic 100%/200% 'Comic Sans MS', cursive; } #silver { background-color:silver } #maroon { background-color: maroon; color:white } #navy { background-color:navy; color:white } #red { background-color: red } #blue { background-color:blue; color:white } #yellow { background-color: yellow } #green { background-color:green; color:white } #orange { background-color:orange } #white { background-color:white } #silver, #red, #green, #orange, #white { height: 35px } #maroon, #navy, #blue, #yellow, #white { width: 35px } </style> </head> <body style="background-color:#ffb600"> <table id="master" border="0" cellpadding="0" cellspacing="0" summary="layoutByTable"><tr> <td id="silver" colspan="2" > 1 </td> <td id="maroon" rowspan="2" > 2 </td> </tr><tr> <td id="navy" rowspan="2" > 3 </td> <td> <table border="0" cellpadding="0" cellspacing="0" summary="inner"><tr> <td id="red" colspan="2" > 4 </td> <td id="blue" rowspan="2" > 5 </td> </tr><tr> <td id="yellow" rowspan="2" > 6 </td> <td id="white"> 7 </td> </tr><tr> <td id="green" colspan="2" > 8 </td> </tr> </table> </td> </tr><tr> <td id="orange" colspan="2"> 9 </td> </tr> </table> </body> </html>

单表解决scheme。

现在不要投我票。

我知道这不是原来问题的答案。
我发布了这个答案，因为OP要求对原始问题发表评论。 

 <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-language" content="en" /> <title>The Challenge</title> </head> <body> <table cellspacing="0" cellpadding="0" border="0" summary=""> <tr> <td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td> <td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td> <td rowspan="5" valign="bottom"><img src="gif/grinch.gif" width="41" height="122" alt="Dr. Suess's Grinch"/></td> </tr><tr> <td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td> <td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td> <td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td> </tr><tr> <td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td> <td width="35" height="35" align="center"><i>7</i></td> </tr><tr> <td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td> </tr><tr> <td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td> </tr> </table> </body> </html>

这是有效的XHTML 1.0过渡，我已经包括了猜字符博士:)

通过剥离Dr. Suess character ，可以将<?xml声明， meta-tags和summary属性缩减为929个字符，并且仍然是有效的XHTML 1.0 Transitional。

编辑

按照要求，XHTML 1.0 Strict 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>The Challenge</title> <style type="text/css"> BODY {background: orange} #garden {border: 1px solid black; color: black} #garden TD { font: italic 100% 'Comic Sans MS', cursive; height: 35px; padding: 0; text-align: center; width: 35px } #c1 {background: silver} #c2 {background: maroon; color: white} #c3 {background: navy; color: white} #c4 {background: red} #c5 {background: blue; color: white} #c6 {background: yellow} #c7 {background: white} #c8 {background: green; color: white} #c9 {background: orange} </style> </head> <body> <table id="garden" cellspacing="0"> <tr> <td id="c1" colspan="4">1</td> <td id="c2" rowspan="4">2</td> </tr><tr> <td id="c3" rowspan="4">3</td> <td id="c4" colspan="2">4</td> <td id="c5" rowspan="2">5</td> </tr><tr> <td id="c6" rowspan="2">6</td> <td id="c7">7</td> </tr><tr> <td id="c8" colspan="2">8</td> </tr><tr> <td id="c9" colspan="4">9</td> </tr> </table> </body> </html>

970个非空白字符，橙色背景，Suess博士的Grinch删除。

标记简洁…. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>The Challenge</title> <style type="text/css"> .garden { position: relative; width: 175px; height: 175px; font-family: 'Comic Sans MS', cursive; border: 1px solid; color: #000; } .garden div { position: absolute; width: 35px; height: 35px; line-height: 35px; text-align: center; } .garden div:first-child { width: 140px; background: silver; } .garden div:first-child + div { right: 0; height: 140px; line-height: 140px; color: #fff; background: maroon; } .garden div:first-child + div + div { top: 35px; height: 140px; line-height: 140px; color: #fff; background: navy; } .garden div:first-child + div + div + div { top: 35px; left: 35px; width: 70px; background: red; } .garden div:first-child + div + div + div + div { top: 35px; right: 35px; height: 70px; line-height: 70px; background: blue; } .garden div:first-child + div + div + div + div + div { top: 70px; left: 35px; height: 70px; line-height: 70px; background: yellow; } .garden div:first-child + div + div + div + div + div + div { top: 70px; left: 70px; background: white; } .garden div:first-child + div + div + div + div + div + div + div { top: 105px; left: 70px; width: 70px; background: green; } .garden div:first-child + div + div + div + div + div + div + div + div{ bottom: 0; right: 0; width: 140px; background: orange; } </style> </head> <body> <div class="garden"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>

链接

替代文字http://sontag.ca/gif/catInHat.gif当我第一次学习HTML和CSS时，我首先在2年前做了这个练习。; 我的第一个解决scheme就像你在这里看到的，除了没有匿名的容器DIVs。 然后我得到了一个网页的想法，CSS和表格进行了比较，以certificateCSS更好。 所以我在“挑战”页面上发表了它，然后发布了这个问题。

Sam Hasler在几分钟之内发布了一个答案，看起来非常接近。 我可以看到他正在寻找比我更好的解决scheme。 他所有的分区都是有序的，我的分区都没有。 Jacco发表了一个评论，问为什么我会使用两个嵌套表。 当然，他也是对的。

所以我有两个荷马辛普森 “啊！” 瞬间的时刻。 我读了关于CSS和CSS的其他问题和答案。 有人提到表格垂直居中。 我的答案也没有垂直居中，但我认为这可能是可能的。 毕竟，所有的事情都是为了performance一切，做得更好。 我现在已经把自己画到了一个angular落，看起来像一个傻瓜，所以我必须find答案。

最终（很尴尬地说，这是多久），我想出了下面的解决scheme。 那时我才能够完成我原来的并排比较网页的概念。

这是一个如何工作，为什么你应该使用CSS的解释

查理的回答是… 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Charlie's CSS layout</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #outer { width:175px; height:175px; text-align:center; font: italic 100%/200% 'Comic Sans MS', cursive; border: 1px solid black; } #inner { width: 105px } #outer>DIV, #inner>DIV { float:left } #outer>DIV>DIV, #inner>DIV>DIV { display: table-cell; vertical-align: middle } #c2 { clear: right } #c3, #c6 { clear: left } #c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px } #c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width: 35px } #c2>DIV, #c3>DIV { height: 140px } #c1>DIV, #c9>DIV { width: 140px } #c5>DIV, #c6>DIV { height: 70px } #c4>DIV, #c8>DIV { width: 70px } #c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px } #c9 { left: 35px } #c1 { background-color: silver } #c2 { background-color: maroon; color: white } #c3 { background-color: navy; color: white } #c4 { background-color: red } #c5 { background-color: blue; color: white } #c6 { background-color: yellow } #c7 { background-color: white } #c8 { background-color: green; color: white } #c9 { background-color: orange } /* these rules are a HACK to center vertically in IE7 */ #outer>DIV>DIV, #inner>DIV>DIV { position:relative; } #c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% } #c5>DIV { top: 0% } #c6>DIV { top: 30% } #c2>DIV { top: 0% } #c3>DIV { top: 15% } </style> </head> <body> <div id="outer"> <div id="c1"><div> 1 </div></div> <div id="c3"><div>3<br/>3<br/>3</div></div> <div id="inner"> <div id="c4"><div> 4 </div></div> <div id="c5"><div> 5<br/>5 </div></div> <div id="c6"><div> 6 </div></div> <div id="c7"><div> 7 </div></div> <div id="c8"><div> 8 </div></div> </div> <div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div> <div id="c9"><div> 9 9 9</div></div> </div> </body> </html>

我想我们已经certificate，有多种方法可以做到这一点。 table标签和CSS都是可行的选项。

我只想说，不pipe是更简单还是更困难，更简单或者更复杂： 用HTML表格来显示表格数据，而不是增加另一种方式来完成这个挑战。

  • 表格用于表格数据。
  • CSS是用于造型/演示。

这是一个不使用绝对定位的例子，不使用表格单元格，在IE6-8，FF等中有效。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Terrible Ted's Table Layout</title> <style type="text/css"> #box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;} div {float:left} #c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px} #c2, #c3{height:140px;line-height:140px} #c5, #c6{height:70px; line-height:70px} #c1, #c9{width:140px} #c2, #c3, #c5, #c6, #c7{width:35px} #c4, #c8{width:70px} #c6, #c7 {margin-top:-35px} #c1{background-color:silver} #c2{background-color:maroon; float:right} #c3{background-color:navy} #c4{background-color:red} #c5{background-color:blue} #c6{background-color:yellow} #c7{background-color:white} #c8{background-color:green} #c9{background-color:orange} </style> </head> <body> <div id="box"> <div id="c1">1</div> <div id="c2">2</div> <div id="c3">3</div> <div id="c4">4</div> <div id="c5">5</div> <div id="c6">6</div> <div id="c7">7</div> <div id="c8">8</div> <div id="c9">9</div> </div> </body> </html>
Interesting Posts

如何禁用Androidbutton？

居中线性布局中的button

你可以做这个HTML布局而不使用表？

如何在ASP.NET MVC 3razorViewStart文件中指定不同的布局？

使用jQuery在屏幕上居中一个DIV

使用视觉格式语言将视图置于其超级视图中

Android对话框：删除标题栏

如何从android的string.xml中读取值？

使用Qt-Designer自动扩展布局

Xamarin.Form的LayoutOptions有什么区别，特别是Fill和Expand？