益智http://sontag.ca/TheChallenge/tiles.gif 格林奇http://sontag.ca/gif/grinch.gif
这种布局可以通过2个HTML表格完成,一个嵌套在另一个HTML表格中,甚至可以使用单个表格.
它也可以用CSS完成,虽然它可能需要更多的思考.
这可能不是真实的世界布局,但我看到的页面相似.认为这是一个谜语; 锻炼来增强你的CSS技能.
为了让事情更有趣,我在一个名为The Challenge的小部分网页中提出了这个问题.我们将检查代码和问题:使用表格或CSS进行布局？当我们的两个对手争夺代码至上时,并排,一个接一个地吹嘘.
第一部分阐述了挑战是如何形成的.我希望你喜欢.
第二部分是决定. 你可能会感到惊讶.
我很高兴看到我发布后几分钟内出现了真正好的答案.这是一次令人羞愧的经历.我不想与你竞争时间.
但是,所有这些,在仔细研究所提供的解决方案之后,我逐渐意识到,所有CSS解决方案(包括我自己的解决方案)都没有提供任何表解决方案.挑战是关于CSS比任何布局解决方案的表更好.
所以我添加了3条新规则(请记住,其中一条规则是可以更改规则).这让一些人很生气.因此,我添加了一些关于规则改变原因的丰富多彩的解释.我觉得这让他们更恼火了.
这是最终输出的样子(背景颜色可选):
alt text http://sontag.ca/gif/garden.gif
我对反复无常的最后一刻规则的变化表示道歉.我错了.每个花园地块的居民都是工匠,手工制作的专家.他们是草书家族的后代,他们的风格归功于斜体.
花园必须是可重新定位的,因为两种花园(桌子和CSS)需要在同一页面上共存.我可能错误地说position:absolute不允许使用规则.如果你能让他们在这种情况下工作,那么你就会有更大的力量.他们肯定会被接受.
我要求在地块周围设置围栏,因为每个花园类型都将种植在一个橙色背景的乡村,非常类似于我们种植的一些花的颜色.
我现在住在荷兰,郁金香季节快到了.如果你在接下来的几个星期里飞过荷兰,这是一个晴朗的日子(这里很少见),你下面的景观看起来就像这个愚蠢的运动.
我并不为橙色而疯狂,但我喜欢和欣赏荷兰人,所以这就是为什么我们有橙色的背景,向我的东道国致敬.:-)
我已经在下面的挑战中发布了Ted的表格答案以及这张图片
alt text http://sontag.ca/gif/garden2.gif
因为占用者可以很容易地添加到花园地块而不触及CSS规则 - 一切都自动居中.
你能用 CSS 做到这一点吗？你可以用鲱鱼砍下森林里最强大的树吗？
更新:查理的答案就在这里.
