您将如何操作：表格或CSS？[关闭]

71

难题 格林奇
（资源： sontag.ca）

第一部分

可以使用2个HTML表（一个嵌套在另一个中，甚至只用一个表）来非常简单地完成此布局。

也可以使用CSS来完成，尽管可能需要更多的思考。

这可能不是现实世界的布局，但我看到了相似的页面。认为这是一个谜。锻炼您的CSS技能的练习。

为了使事情变得更有趣，我在一个名为The Challenge的分为两部分的网页中对该问题进行了框架化。我们将检查代码和问题：使用表还是CSS进行布局？，并排，逐击，因为我们的两个对手为代码至上而战。

第一部分阐述了挑战的产生。我希望你喜欢。

第二部分是决策。 您可能会感到惊讶。

第二部分

发布后仅几分钟，我很快就收到了如此迅速的回答，真让我感到惊讶。这是一次令人沮丧的经历。我不希望与您竞争计时赛。

但是，话虽这么说，在仔细检查了所提供的解决方案之后，我才意识到，没有一个CSS解决方案（包括当时的我自己的）和所提供的任何一个表解决方案一样有效。挑战在于CSS优于任何表格布局解决方案而言，。

因此，我添加了3条新规则（请记住，其中一条规则是可以更改的规则）。这使某些人感到恼火。因此，我随后添加了一些有关为什么更改规则的精彩解释。我认为这使他们更加恼火。

  1. 我们的花园要围着篱笆。使它与可能遇到的沉闷环境区分开的东西；而且不太贵，但易于保持清洁。所以我想要花园周围有一个1像素的黑色边框
  2. 每个花园地块（字符）上的居民必须为黑色或白色，具体取决于哪个显示出他们的花园中最好的。而且它们都是草书血统。它们之间没有斜体。;-)
  3. 花园是可重定位的，也就是说，我可以在页面上的任何位置（没有绝对定位）拥有这个花园。

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

替代文字
（来源： sontag.ca）

我对反复无常和最后一分钟的规则表示歉意。我错了 每个花园地块的居民都是手工制作的手工匠人。他们是草书家族的后裔，他们的风格感归功于斜体。

花园必须可重定位，因为两种花园（表和CSS）都需要在同一页面上共存。我可能会说错position:absolute不允许使用规则。如果您可以让他们在这种情况下工作，那么您将获得更大的权力。他们一定会被接受。

我要求在地块周围设置围栏，因为每种花园类型都将种植在橙色背景的乡村中，该乡村背景与我们所种花朵的颜色非常相似。

我现在住在荷兰，郁金香季节快到了。如果您在接下来的几周内飞越荷兰，而且天气晴朗（这里很少见），那么您下面的风景将看起来很像这项愚蠢的练习。

我并不喜欢橙色，但我喜欢并欣赏荷兰人，所以这就是为什么我们有橙色背景，以向东道国致敬。:-)

第三部分

我已经将《挑战》中的Ted的表格答案与这张图片一起发布了

替代文字
（来源： sontag.ca）

因为可以轻松地将居住者添加到花园中，而无需触及CSS规则-一切都会自动居中。

你能用 CSS 做到吗？你能用...鲱鱼砍掉森林里最强大的树吗？

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

css  layout  xhtml  html-table 
— 第欧根尼
source
我不明白为什么您要为此嵌套2个表，它可以合而为一。
— 雅科
高度和宽度都固定吗？
— alex
我是否认为目标是创建尽可能简洁的标记？
— 山姆·哈斯勒2009年
4
我们是否必须包括Suess博士角色？
— Andrew Shepherd
15
哇...发布问题，获得几个出色的解决方案，修改问题，获得更多反馈，再次修改，获得更多输入，然后发布您自己的解决方案并接受。您是否只是在为网站吸引流量？
— Prestaul

Answers:

37

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

我还选择不将外部div重复使用为白色的7平方（在以前的编辑中没有自己的div ），因为如果您想使用布局，这将是不切实际的，并且感觉有点像作弊（尽管从简洁/像素完美的角度来看，我喜欢它的厚脸皮）。

在这里查看：http : //jsbin.com/efidi
在这里编辑：http : //jsbin.com/efidi/edit
验证为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>

撇开：如果可以的话，我可能会留一些空白，但这是在SO上的代码块开始获得滚动条之前的极限，我选择将所有这些都显示在屏幕上。

注意：我line-height从泰森（他是第一个获得正确渲染答案的人）借来的。

— 山姆·哈斯勒
source
该解决方案可在IE 5.5，IE7和Firefox 3中使用。它只需要数字，非常完美。
— 攻击
@attack，感谢您指出，现在已修复。
— 山姆·哈斯勒2009年
最小化了我的答案，根据我的计算，它比表格解决方案少180个字符：1042（表格）到858（我的）字符不计算身体/头部/样式标签。
— 山姆·哈斯勒
如果您确实想要像素完美的解决方案，则忘记了正确的字体“ Comic Sans MS”和蓝色文本颜色。;）
— Gumbo
在Win2k的IE6.SP1中无法正确呈现。（但是做什么？）
— 雅科（Jacco
18

这是三个解决方案。

标记：

<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%;
}
— 秋葵
source
文字不在垂直和水平居中。（也不是斜体，尽管这是一个小小的错误。）
— Sam Hasler，2009年
从技术上讲，它的大小也不正确（问题中链接到的挑战页面指出，中心有35px的正方形。）
— Sam Hasler 2009年
6
好吧，尽管这是一个布局问题，而不是一个像素一个像素的问题。
— Gumbo
1
两者都布置一个像素。我全都要。
— Diogenes
2
好吧，只需将20em替换为175px。其余的保持不变。
— Gumbo
17

在这里，您所需要的行数比表标记的任何滥用都少：

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

：P

— 彼得·布顿
source
您甚至可以只在一行中安装它！
— Gumbo
如有必要，是的，但这更具可读性。：）
— Peter Boughton
不，我明确地避免了这一点。
— Peter Boughton
8
那是开发人员的正确解决方案！:)
— boj
@PeterBoughton：他说要使用CSS。您忘记了在background: ...data-uri中对图像进行编码，那么您将有一个有效的解决方案:-)。
— Eamon Nerbonne
13

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

<!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>
— 泰森
source
做得好，您首先到达那里。我已经借了一些想法来回答自己的问题。我试图使我的简明扼要。
— 山姆·哈斯勒2009年
（以防万一您继续前进，而没有注意到问题的更新）您是否要进行更新以遵循新规则？
— 山姆·哈斯勒2009年
嗯，不是。我按照最初所说的解决了。我不会每隔几个小时就花10个小时来适应随机的新规则。:)无论如何，您的解决方案更好。
— 泰森
抱歉，新规则并不是真正随机的。我想将表解决方案和CSS解决方案并排放置在同一网页上。我确实尝试过您的代码，看起来不错，但是位置：绝对给我带来了问题。如果我错过了什么，请告诉我。
— Diogenes
4

只要宽度和高度恒定，就可以始终使用绝对定位来获得相同的效果。这应该足够明显，这样我就不必键入它了（已经晚了，我很懒：P）

— 维尔克斯
source
4

我采用的方法与到目前为止所看到的“一切都确定”解决方案略有不同。比基于表的解决方案少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="t l w" style="background-color:silver">1</div>
    <div class="t r h" style="background-color:maroon">2</div>
    <div class="b l h" style="background-color:navy">3</div>
    <div class="c">
        <div class="t l w" style="background-color:red">4</div>
        <div class="t r h" style="background-color:blue">5</div>
        <div class="b l h" style="background-color:yellow">6</div>
        <div class="c">7</div>
        <div class="b r w" style="background-color:green">8</div>
    </div>
    <div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>

编辑：根据您的修改，我发布了一个稍微冗长但希望更清晰的解决方案，该解决方案添加了黑色边框，将一些文本设置为白色，并且没有绝对定位“花园”。

<!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>
— 前期
source
最小化了我自己的答案，根据我的计算，它比表格解决方案少180个字符：1042（表格）到858（我的）字符不计算身体/头部/样式标签。
— 山姆·哈斯勒2009年
浮动解决方案非常优雅，紧凑，Sam做得很好。我本着CSS的精神追求更多。此解决方案可用于在同一页面上放置多个“平铺”，而无需复制CSS，我希望它易于阅读且易于理解。
— Prestaul
我喜欢您的JSBin链接，因此，如果有人想玩我的代码版本，上面有两个图块：jsbin.com/avive
— Prestaul，2009年
这也是一种有趣的方法，尽管我在遵循它时遇到了一些困难。您可以将班级名称更改为更能表达意图的名称吗？如果班级名称表达了意图并有助于理解，那么对多余的几个字符没有任何惩罚，但要点很重要。
— Diogenes
好的，我已经更新了一个新版本，该版本具有更清晰的类名并可以满足您的其他新要求。新版本在这里：jsbin.com/uzaba
— Prestaul
4

单表解决方案。

现在不要对我投反对票。

我知道这不是原始问题的答案。
我发布了此答案，因为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="http://sontag.ca/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 Transitional，并且包含Suess博士的角色:)

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

编辑

根据要求，XHTML 1.0严格

<!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>

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

— 雅科
source
height，width和align属性在XHTML中无效。您需要将它们指定为单独的CSS规则。这将是一个很好的练习。有关此方面的提示，请参见Ted的表格答案。
— Diogenes
我很好奇，当按XHTML严格执行时，单表解决方案可能会减少到什么程度。
— Diogenes
宽度和高度属性在“过渡”中有效。这个不是要解决您的难题，而是一个表格示例。这就是为什么我没有使用任何CSS的原因。其他人则可以自由地将其严格地进行:)
— Jacco
@Jacco-嘿，您的新版本清理得非常好！因此，我向您承认桌上解决方案-您的解决方案更好。但我不知何故认为我们的餐桌解决​​方案都无法在这里赢得任何选票；-)
— Diogenes
“正确”的解决方案完全取决于要显示的数据的性质，无论是表格形式还是非表格形式。（如果仅是视觉效果，那么彼得·布顿解决方案很难被击败）
— 雅科
4

这里还没有人提供表格解决方案，而挑战在于将CSS布局与在受控（且存在严重偏差）场景中基于表格的布局进行比较。

这是Ted的Table Layout解决方案及其面临的挑战...

“通过基于表的解决方案，仅通过对HTML标记进行非常简单的添加，就可以很容易地向花园地块中添加新居民！所有居民都将以令人愉悦的样式自动居中并隔开。例如：”

替代文字
（来源：sontag.ca）（来源：sontag.ca）
替代文字

“据我所知，如果不对CSS规则进行大量翻新，此处基于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>
— 第欧根尼
source
您是否正在使用<br> s将2、3和5个字符显示在单独的行上？当我只是将它们与空格添加到您的html中时，它们会出现在同一行上。参见jsbin.com/acoge
— Sam Hasler 2009年
是的-这相当于简单的标记，对吧？
— Diogenes
2

简短的加价...。

<!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>

链接

— 安迪·福特
source
有趣的方法，但这不适用于IE6 ...
— Prestaul，2009年
是的，我只是想给事情加点调味
— 安迪·福特
您可以使用“ content：”;来进一步缩短标记。CSS规则也是如此。
— 泰森
@Tyson-从技术上讲是正确的，但是表示形式属于CSS，内容属于HTML。@Presthaul-运行着“花园”的隐喻...无论如何我都不想在如此糟糕的土壤上种植我的花园
— Andy Ford
1

我认为我们已经证明有多种方法可以做到这一点。该table标签和CSS都是可行的选择。

与其添加另一种方式来完成挑战，不如说它是更容易或更困难，更简单或更复杂：我应该说HTML中的表格用于显示表格数据。

  • 表制成表格数据。
  • CSS是做了造型/演示。
— 特拉维斯
source
1

替代文字
（来源：sontag.ca）
2年前，当我第一次学习HTML和CSS时，我首先进行了此练习。我的第一个解决方案类似于您在这里看到的解决方案，除了没有匿名容器DIV。然后，我想到了一个网页，该网页将CSS与Table进行了并排比较，以证明CSS更好。因此，我在“挑战”页面上工作，将其发布，然后发布了此问题。

萨姆·哈斯勒（Sam Hasler）在几分钟之内发布了答案，看来这真的很接近。我可以看到他正在寻找比我更好的解决方案。他所有的div都井井有条，而我的不是。 Jacco发表了一条评论，询问为什么我要使用两个嵌套表。当然，他也是对的。

所以，我有两个辛普森 “卫生署！” 瞬间。我在表格与CSS上阅读了其他问答。有人提到桌子垂直居中。我的回答也没有垂直居中，但我认为这是可能的。毕竟，重点是要做表可以做的所有事情，并且做得更好。到目前为止，我已经把自己画在一个角落，看上去像个傻瓜，所以我必须找到答案。

最终（不好意思地说是多长时间），我想出了以下解决方案。这样，我便可以实现并排比较网页的原始概念。

这是所有功能的解释，以及为什么要使用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>
— 第欧根尼
source
获得垂直对齐的荣誉：中间工作，我尝试并失败了。
— 山姆·哈斯勒2009年
嗯，使用CSS声明要处理的DIV就像是一个表，因为您不想使用表...感觉就像在追逐自己的尾巴。
— 雅科
1
不，我想要DIV将内容垂直居中，这是一个完全合理的要求。我偏爱使用表（或不使用表）与在框内居中放置内容无关。
— Diogenes
那些用于垂直对齐的技巧在IE7中对我不起作用。（如果有帮助，我会保持远景）
— 山姆·哈斯勒
IE hacks不会随着内容的变化自动将内容居中，说实话，我不知道它们的工作方式。如果Vista与众不同，这并不令人感到意外。
— Diogenes
0

这是一个不使用绝对定位，不使用表格单元并且在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>
— 品溪
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.