【发布时间】：2010-10-11 17:24:15
【问题描述】：
我今天正在创建一个布局，如下所示：
+----+ +----+ +----+ +----+
| | | | | | | |
+----+ +----+ +----+ +----+
看起来很简单，但我还有一些额外的规格：
- 最大列数 (n) 需要是动态的（此 HTML 页面是在运行时生成的）。
- 整个集合必须是水平流动的（当窗口变窄时，它们会尽可能地压缩。
- 整个集合还必须在屏幕上居中，在任何 1 行中一次不超过 n 列。
- 理想情况下，最右边的“框”会放到下一行，并在必要时重新排列，即当窗口变窄且 n 个框不适合屏幕时。
- 当然，当要显示的元素超过 n 个时，它们只会创建这些元素的额外行。
- 各个框都带有圆角边框，可以通过任何操作进行点击。
通过一些研究（谷歌+对我发现的示例的改编），我能够像使用 div 和 css 那样做#6。但是，我很难做到 2-4。我几乎一路走到了那里，但我一生都无法让 2 和 3 工作。 2 没什么大不了的，但 3 至关重要。我正在使用浮动 div 进行定位，并找到了一个 example site 提到使用相对定位和左移等来使其居中，但它在我的情况下不起作用（尽管该示例工作正常）。在我的情况下，他们会从中心开始而不是居中，然后向右移动，让它看起来很滑稽，所以我不知道我错过了什么。
在为此苦苦挣扎了几个小时后，我在 5 分钟内使用以下代码完成了它：
<simplified code>
max_columns = 3; /* whatever */
html = "<table>";
for i = 1 to num_elements
if i % max_columns eq 1 then
html += "<tr>";
endif
html += "<td>";
html += "<div>my element</div>"; /* This is a complex multi-leveled div */
/* that makes boxes with rounded corners */
html += "</td>";
if i % max_columns eq 0 or i eq num_elements then
html += "</tr>";
endif
endfor
html += "</table>";
</simplified code>
这满足了我的所有要求，除了 #4 很好，但不是必需的。
问题：[你会如何]/[有什么办法]不使用表格吗？
编辑：我没有机会实施/测试以下任何潜在的解决方案，因为我需要完成其他方面（在接下来的 5 天内），然后再回到这个问题。我当前的 lame (?) 解决方案似乎工作正常，除了 req #4，所以这个问题现在不在我的关键路径上。但我将对此进行测试并发布反馈。所以我会一直保持这个问题，直到那时。我很欣赏这些回应。谢谢。
编辑#2：所以我尝试了以下一些解决方案，这就是我想出的：
<html>
<head>
<style>
.box {
width: 19%;
height: 150px;
border: 1px solid black;
display: inline-block;
margin: 3 0 0 0;
}
#center {
text-align: center;
border: 1px solid green;
width: 80%;
height: 85%;
padding: 0 0 0 0;
vertical-align: middle;
margin: 0;
}
.footr{
text-align: center;
border: 1px solid green;
width: 80%;
height: 38px;
padding: 0 0 0 0;
vertical-align: middle;
margin: 0;
}
</style>
</head>
<body style="margin-left:0; margin-top:0; margin-right:3;" >
<div style="background-image: url(x); height: 60; width:131; float:left;"></div>
<div style="background-image: url(x); background-repeat:repeat-x; height:60;"></div>
<div class="clearer"></div>
<center>
<div id="center">
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box" style="float:right;">Blah</span><br>
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box" style="float:right;">Blah</span><br>
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
</div>
<div class="footr">Footer</div>
</center>
</body
</html>
你可能会说，这解决了我几乎所有的问题，除了 2/3（我原来的 Q 中没有提到：
- 整个块的垂直对齐，使其垂直居中
- 在水平行上，我希望跨度粘附在外部 div 的外侧边缘，内部 div 之间的间距均匀。
- 在小于
n跨度的行上，我会让他们在前一行的第 3 个跨度下排队。
我做这个练习完全是为了我个人的“我只是想从头开始”，而且是在我自己的时间。为了工作，我已经做了大部分（很少）使用表格来正确排列东西。
PS：请原谅一些格式错误的 HTML 和内联样式等。一旦我得到 100% 有效的解决方案，我将清理它。
【问题讨论】：
-
根据您的要求——注意术语“列”和“行”——这似乎满足了作为“表”的语义要求，那么为什么不使用正确的语义标记呢？如果它像鸭子一样嘎嘎叫……
-
是的。但是，我的术语纯粹是我的思维方式的反映，我试图不依赖这种方式。但这就是我为了权宜之计而最终做的事情。我想，如果 div 采用了 de-riguer (?) 的格式化方式，那么肯定有一种简单的方法可以做到这一点吗？