你会怎么做:表或CSS？

益智https://img.devbox.cn/3cccf/16086/243/0ee42a7fd2ff01cd.png 格林奇http://sontag.ca/gif/grinch.gif

第一部分

这种布局可以通过2个HTML表格完成,一个嵌套在另一个HTML表格中,甚至可以使用单个表格.

它也可以用CSS完成,虽然它可能需要更多的思考.

这可能不是真实的世界布局,但我看到的页面相似.认为这是一个谜语; 锻炼来增强你的CSS技能.

为了让事情更有趣,我在一个名为The Challenge的小部分网页中提出了这个问题.我们将检查代码和问题:使用表格或CSS进行布局？当我们的两个对手争夺代码至上时,并排,一个接一个地吹嘘.

第一部分阐述了挑战是如何形成的.我希望你喜欢.

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

---

第二部分

我很高兴看到我发布后几分钟内出现了真正好的答案.这是一次令人羞愧的经历.我不想与你竞争时间.

但是,所有这些,在仔细研究所提供的解决方案之后,我逐渐意识到,所有CSS解决方案(包括我自己的解决方案)都没有提供任何表解决方案.挑战是关于CSS比任何布局解决方案的表更好.

所以我添加了3条新规则(请记住,其中一条规则是可以更改规则).这让一些人很生气.因此,我添加了一些关于规则改变原因的丰富多彩的解释.我觉得这让他们更恼火了.

我们的花园周围有围栏; 将它与其可能发现的任何沉闷环境区分开来的东西; 并不太贵,但易于保持清洁.所以我希望花园周围有一个1像素的黑色边框

每个花园地块(人物)的居民必须是黑人或白人,这取决于他们在花园中最好的情况.他们也都是草书血统.他们没有斜体.;-)

花园是可重新定位的,也就是说,我可以在页面的任何地方都有这个花园(没有绝对定位).

这是最终输出的样子(背景颜色可选):

alt text http://sontag.ca/gif/garden.gif

我对反复无常的最后一刻规则的变化表示道歉.我错了.每个花园地块的居民都是工匠,手工制作的专家.他们是草书家族的后代,他们的风格归功于斜体.

花园必须是可重新定位的,因为两种花园(桌子和CSS)需要在同一页面上共存.我可能错误地说position:absolute不允许使用规则.如果你能让他们在这种情况下工作,那么你就会有更大的力量.他们肯定会被接受.

我要求在地块周围设置围栏,因为每个花园类型都将种植在一个橙色背景的乡村,非常类似于我们种植的一些花的颜色.

我现在住在荷兰,郁金香季节快到了.如果你在接下来的几个星期里飞过荷兰,这是一个晴朗的日子(这里很少见),你下面的景观看起来就像这个愚蠢的运动.

我并不为橙色而疯狂,但我喜欢和欣赏荷兰人,所以这就是为什么我们有橙色的背景,向我的东道国致敬.:-)

---

第三部分

我已经在下面的挑战中发布了Ted的表格答案以及这张图片

alt text http://sontag.ca/gif/garden2.gif

因为占用者可以很容易地添加到花园地块而不触及CSS规则 - 一切都自动居中.

你能用 CSS 做到这一点吗？你可以用鲱鱼砍下森林里最强大的树吗？

---

更新:查理的答案就在这里.

1> Sam Hasler..：

---

更新: 最终编辑.切换到STRICT DTD,删除斜体以匹配问题中的图像,并恢复为id的全色名称,以根据问题的OP评论显示意图,并将css中id标识的主列按照它们出现的顺序排序在HTML中.

我也选择不重复使用外部div作为白色7方形(它在之前的编辑中没有它自己的div ),因为如果你想使用布局就不会有实际意义,并且觉得有点像作弊(虽然从简洁/像素完美的角度来看,我喜欢它的厚脸皮).

在此处查看:http://jsbin.com/efidi
在此编辑:http://jsbin.com/efidi/edit
验证为XHTML严格

 
 
 
  
 
    
1
 
    
2
 
    
3
 
    
4
 
    
5
 
    
6
 
    
7
    
8
 
    
9
 
  

旁白:如果可以的话,我可能会添加更多的空白,但是在SO上的代码块开始获取滚动条之前,这已经到了极限,我选择将它们全部显示在屏幕上.

注意:我line-height从Tyson那里借用了修复程序(他是第一个获得正确渲染答案的人).

2> Gumbo..：

---

这是三个解决方案.

标记:

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9

基本样式表(尺寸和颜色):

#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%;
}

---

嗯,虽然这是一个布局问题,而不是逐个像素的问题.

---

那么只需将20em替换为175px即可.其余的保持不变.

3> Peter Bought..：

---

在这里你 - 比任何滥用表标签所能提供的线路更少:

:P

---

这是来自开发人员的正确解决方案!:)

4> Tyson..：

---

这与您的表格示例完全匹配,包括垂直和水平居中的文本(到目前为止还没有其他人做过).

    

    

    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9