DIV格式的3列表格

Question

许多人询问等同于表的div，但不幸的是，我还没有找到答案。

基本上，我希望实现如下所示的布局，但不使用表格。

​

​

这是有效的HTML和CSS代码：

<table class="NV">
<tr><th colspan=3></th></tr>
<tr><td class="NVL">
<a href="page-1" rel="prev">
<div ID="NL"></div>See 1st photo album page</a>
</td><td>
<p>Page 2 of 19 (2/19)</p>
<span>
<a href="page-1">1</a>
<ins>2</ins>
<a href="page-3">3</a>
<a href="page-4">4</a>
<a href="page-5">5</a>
</span>
<br>
</td><td class="NVR">
<a href="page-3" rel="next">
<div ID="NR"></div>See 3rd photo album page</a>
</td></tr></table>

#NL,#NL2,#NR,#NR2{width:71px;height:70px}
#NL{background:-196px 0}
#NL2{background:-339px 0}
#NR{background:-267px 0}
#NR2{background:-410px 0}
.NV{width:100%;color:#000;background:#CCF;border:1px solid #FF0;text-align:center}
.NV INS{color:#FFF;background:#040;font-size:130%;padding:0.5em}
.NV INS,.NV A{margin:0.4em;padding:0.8em;display:inline-block;font:bold 100% arial}
.NV SPAN A{border:1px solid #000;background:#BDF;color:#000;font-size:100%}
.NV SPAN A:hover{background:#FFF;color:#000}
.NVR A,.NVR DIV{display:block;margin-left:auto;text-align:right}
.NVL A,.NVL DIV{display:block;margin-right:auto;text-align:left}
.NVL,.NVR{width:71px}
@media(max-width:500px){.NV INS,.NV A{margin:0.2em;padding:0.4em}}

以下是我到目前为止尝试使其成为无表布局的方法：

<div class="NV">
<a ID="NL" href="page-1" rel="prev">See 1st photo album page</a>
<p>Page 2 of 9 (2/9)</p>
<span>
<a href="page-1">1</a>
<ins>2</ins>
<a href="page-3">3</a>
<a href="page-4">4</a>
<a href="page-5">5</a>
</span>
<a href="page-3" rel="next" ID="NR">See 3rd photo album page</a>
</div>

#NL,#NL2,#NR,#NR2{display:block;width:71px;height:70px}
#NL{background:-196px 0}#NL2{background:-339px 0}#NR{background:-267px 0}#NR2{background:-410px 0}
.NV{width:100%;color:#000;background:#CCF;border:1px solid #FF0;text-align:center}
.NV SPAN {vertical-align:middle}
.NV SPAN INS{color:#FFF;background:#040;font-size:130%;padding:0.5em}
.NV SPAN A{background:#BDF;color:#000}
.NV SPAN INS,.NV SPAN A{border:1px solid #000;margin:0.4em;padding:0.8em;display:block;width:20px;font:bold 100% arial}
@media(max-width:500px){
.NV INS,.NV A{margin:0.2em;padding:0.4em}
}

​

​

如果我想自己解决这个问题，我可以将所有内容声明为一个块，并在我的CSS中使用以下代码：

display:inline-block;

但根据w3c的说法，手机只支持CSS1，内联块和浮点数不适合使用。此外，在包括IE6在内的较老的web浏览器中，内联块不起作用。

我如何在不使用表格进行布局的情况下解决这个问题？

请忽略第二张图片中最右边的小黑条。

Answer 1

我向你挑战，如果有人真的还在运行像IE6这样的浏览器--请记住，要做到这一点，你必须运行没有更新的XP。当然，它们是存在的，但现在，那些运行它们的人知道它们是有局限性的。

对于我的团队来说，这将是一个非常可接受的答案，而且我们对w3遵从性非常严格--我们世界各地的客户都要求这样做。我鼓励你在不同的浏览器中运行它，看看哪些浏览器不能处理它。Here's a great site证明超过97%的浏览器(包括移动电话，这也强制自动更新)可以支持它。

HTML：

<div class="container">  
    <div class="arrow"><img src="../path/to/arrow.jpg"></div>
    <div class="number"><a href="#">1</a></div>
    <div class="number"><a href="#">2</a></div>
    <div class="number"><a href="#">3</a></div>
    <div class="number"><a href="#">4</a></div>
    <div class="number"><a href="#">5</a></div>
    <div class="number"><a href="#">6</a></div>
    <div class="arrow"><img src="../path/to/arrow.jpg"></div>

</div>

CSS：

.container {
     width: 50%;
}
.number, .arrow {
    width: 20px;
    display: inline-block;
    height: 20px;
    border: 1px solid #000;
    padding: 2px;
    text-align: center;

}
.number a:link, .arrow a:link {
    text-decoration: none;
}

Here's the fiddle to try yourself.

因为我们对HTML和所有的东西都非常着迷，所以最好使用字形而不是图像来表示箭头。我只想说......