Question

我想在表格布局中打印500个单词，因此单词按照以下列组织：

abc      alpha  beta        gammalong
a        beta   zu          delta
epsilon  zu     deltagamma  alpha

如果我使用TABLE标签，我必须预先确定行长（用文字表示），所以有些人看不到所有页面都填充了单词而其他页面必须滚动。

如何制作适合页面宽度的布局，自动选择可以连续放置的单词数以匹配页面宽度？

Answer 1

如果您使用％作为代码尺寸，则可以。

Answer 2

您可以使用<div> tags和css类（例如display:table and display:table-row and table-cell）将它们放在正确的位置。

Answer 3

将它们全部放在用＆＃34; float：left＆＃34;设置的div中。并给他们所有相同的宽度。例如：

（将样式放在CSS文件中，它们仅为示例而内联）

<div style="position: relative; float: left; margin-right: 10px; width: 150px; height: 25px;">abc</div>
<div style="position: relative; float: left; margin-right: 10px; width: 150px; height: 25px;">alpha</div>
<div style="position: relative; float: left; margin-right: 10px; width: 150px; height: 25px;">beta</div>
<div style="position: relative; float: left; margin-right: 10px; width: 150px; height: 25px;">gammalong</div>

它们将继续向右伸展，直到它们达到父节点的宽度（如果它们不在另一个元素中，可能为document.body。）

CSS：用于匹配页面宽度的表格布局

3 个答案: