你会怎么做:表或CSS？

Question

第一部分

这种布局可以通过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 做到这一点吗？你可以用鲱鱼砍下森林里最强大的树吗？

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

Answer 1

Sam*_*ler 37

更新: 最终编辑.切换到STRICT DTD,删除斜体以匹配问题中的图像,并恢复为id的全色名称,以根据问题的OP评论显示意图,并将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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 2

Gum*_*mbo 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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

现在定位:

使用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;
}

Run Code Online (Sandbox Code Playgroud)

使用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;
}

Run Code Online (Sandbox Code Playgroud)

使用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%;
}

Run Code Online (Sandbox Code Playgroud)

嗯,虽然这是一个布局问题,而不是逐个像素的问题. (6认同)
那么只需将20em替换为175px即可.其余的保持不变. (2认同)

Answer 3

Pet*_*ton 17

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

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

Run Code Online (Sandbox Code Playgroud)

:P

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

Answer 4

Tys*_*son 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>

Run Code Online (Sandbox Code Playgroud)

Answer 5

Dio*_*nes 1

_{（来源：sontag.ca）}
我第一次做这个练习是在两年多前，当时我第一次学习 HTML 和 CSS。我的第一个解决方案与您在此处看到的解决方案类似，只是没有匿名容器 DIV。然后我想到了一个网页的想法，该网页对 CSS 与表格进行并排比较，以证明 CSS 更好。所以我在挑战页面上工作，发布它，然后发布这个问题。

山姆·哈斯勒 (Sam Hasler)在几分钟内发布了答案，看起来非常接近。我可以看出他正在寻找比我更好的解决方案。他所有的 div 都按顺序排列，而我的则不然。 Jacco发表了一条评论，询问为什么我使用两个嵌套表，而一个就可以。当然，他也是对的。

所以我有两个荷马辛普森 “Doh！” 立即。我阅读了有关表格与 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，9 月前
查看次数：	4443 次
最近记录：	6 年，5 月前