我今天正在创建一个布局，如下所示:
+----+ +----+ +----+ +----+
| | | | | | | |
+----+ +----+ +----+ +----+
看起来很简单，但我有一些额外的规范:
- 最大列数 (n) 需要是动态的(此 HTML 页面是在运行时生成的)。
- 整个集合必须是水平流动的(当窗口变窄时，它们会尽可能地压缩。
- 整个集也必须在屏幕上居中，并且任何 1 行中一次不超过 n 列。
- 理想情况下，最右边的“框”落到下面的行并在必要时重新排列，即当窗口变窄并且 n 个框不适合屏幕时。
- 当然，当要显示的元素多于 n 个时，它们只会创建额外的行。
- 各个框均带有圆 Angular 边框，可通过任何操作进行点击。
通过一些研究(google+对我发现的示例的改编)，我能够像使用 div 和 css 那样做#6。但是，我真的很难做到 2-4。我几乎一路走到了那里，但就我的生活而言，我无法让 2 和 3 工作。 2 没什么大不了的，但 3 是至关重要的。我使用 float 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 天内)，然后再回到这里问题。我当前的蹩脚 (?) 解决方案似乎工作正常，除了请求 #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(我原来的问题中没有提到:
- 整个 block 的垂直对齐，使其垂直居中
- 在水平行上，我希望 span 粘在外部 div 的外边缘，内部 div 在它们之间均匀分布。
- 在跨度小于
n的行中，我将它们放在前一行的第 3 个跨度下方。
我做这个练习完全是为了我个人的“我只是想抓痒”，而且是在我自己的时间里。对于工作，我已经(少量地)使用表格来正确排列内容。
附注:请原谅一些格式错误的 HTML 和内联样式等。一旦我得到 100% 有效的解决方案，我会清理它。
最佳答案
最好对表格数据使用表格。注意 Divitis问题。
更新:如果这些“框”是指向其他地方的链接，那么只需使用 anchor 实现它们并适本地设置它们的样式。一种称为 image replacement 的技术可能会帮助你。关于如何布置这些链接，请查看 listamatic horizontal lists .
关于html - 使用 DIV 的等效表布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/618323/