(source: sontag.ca http://sontag.ca/gif/grinch.gif)
这种布局可以非常简单地使用 2 个 HTML 表格（一个嵌套在另一个表格中）甚至使用单个表格来完成。
也可以使用 CSS 来完成，尽管它可能涉及多一点思考.
这可能不是现实世界的布局，但我见过类似的页面。将此视为一个谜语；提高 CSS 技能的练习。
为了让事情变得更有趣，我在一个由两部分组成的小网页中提出了这个问题，名为挑战 https://web.archive.org/web/20121128141851/http://sontag.ca:80/TheChallenge/。我们将检查代码和问题：使用表格或 CSS 进行布局？我们的两个对手并肩作战，为代码霸权而战。
第一部分阐述了如何挑战 https://web.archive.org/web/20121128141851/http://sontag.ca:80/TheChallenge/成为了。我希望你喜欢。
第二部分是决定 https://web.archive.org/web/20090330024144/http://sontag.ca:80/TheChallenge/CSS%20versus%20Tables.html. 你可能会感到惊讶.
我很惊讶真正好的答案竟然这么快就出现了minutes我发帖后。这是一次令人羞愧的经历。我不想和你一起参加计时赛。
但是，话虽这么说，在仔细检查所提供的解决方案后，我发现 意识到没有一个 CSS 解决方案（包括当时我自己的）能够像所提供的任何一个表格解决方案一样有效。挑战在于 CSS 比表格更好any布局解决方案。
所以我添加了3条新规则（记住，其中一条规则是可以更改的）。这惹恼了一些人。然后我添加了一些关于规则更改原因的丰富多彩的解释。我认为这让他们更加恼火。
这就是最终输出的样子（背景颜色可选）：
(source: sontag.ca http://sontag.ca/gif/garden.gif)
我对反复无常和最后一刻规则的改变表示歉意。我错了。每个花园的居民都是工匠，手工制作的专家。他们是草书家族，并将他们的风格感归功于italics.
花园必须可重新定位，因为两种花园（桌子和 CSS）都需要coexist在同一页上。我这样说可能是错的position:absolute规则是不允许的。如果你能让他们在这种环境下工作，那么你就会拥有更多的力量。他们肯定会被接受。
我要求在地块周围设置围栏，因为每种花园类型都将种植在橙色背景的乡村，与我们种植的一些花朵的颜色非常相似。
我现在住在荷兰，郁金香季节即将来临。如果您在接下来的几周内飞越荷兰，并且天气晴朗（这里很少见），您下面的风景将看起来与这个愚蠢的练习非常相似。
我并不热衷于橙色，但我确实喜欢并钦佩荷兰人，所以这就是为什么我们有橙色背景，这是对我的东道国的致敬。 :-)
我已经发布了特德的表答案 https://stackoverflow.com/questions/636712/how-would-you-do-this-tables-or-css/645292#645292来自下面的挑战以及这张图片
(source: sontag.ca http://sontag.ca/gif/garden2.gif)
因为可以轻松地将居住者添加到花园地块中，而无需触及 CSS 规则 - 一切都会自动居中。
你能用以下方法做到这一点吗 CSS? 你能用……鲱鱼砍倒森林里最强大的树吗？
Update：查理的答案就在这里。
Update: 最终编辑。切换到 STRICT DTD，删除斜体以匹配问题中的图像，并恢复 id 的全彩名称以根据问题上的 OP 评论显示意图，并将 css 中 id 名称的主列按照它们出现的顺序进行排序在 HTML 中。
我还选择不重复使用外部 div 作为白色 7 方块（它没有自己的 div之前的编辑 https://stackoverflow.com/revisions/viewmarkup/850725），因为如果你想使用布局，它就不太实用，并且感觉有点像作弊（尽管从简洁/像素完美的角度来看，我喜欢它的厚颜无耻）。
在这里查看：http://jsbin.com/efidi http://jsbin.com/efidi
在这里编辑：http://jsbin.com/efidi/edit http://jsbin.com/efidi/edit
<!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>
旁白：如果可以的话，我也许会多放一点空白，但这是在 SO 上的代码块开始获得滚动条之前的限制，我选择将其全部显示在屏幕上。
注：我借用了line-height修复自Tyson https://stackoverflow.com/questions/636712/how-would-you-do-this-with-css/636780#636780（谁是第一个得到正确渲染答案的人）。