html - CSS 是否有办法自动设置表格中的列数量？

Question

CSS 是否有办法自动设置表格中（固定宽度）列的数量，以便它们填充它们所在的 div 元素的宽度？

就像，如果你的屏幕很窄，表格布局可能是这样的：

. . .
. . .
. . .
. . .

但是如果你把它稍微宽一点，表格布局就会变成这样：

. . . .
. . . .
. . . .

这个用例是用于图片库，但如果有比使用表格更简单、更容易的方法，我会全力以赴。

PS：我试图将 javascript/jquery 的数量保持在最低限度，所以我更喜欢不使用它的解决方案。

Answer 1

不是用 a <table>，但你可以使用这样的元素：

<div id="gallery">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  ...
</div>

和CSS：

#gallery>div {
  display:inline-block;
  vertical-align:top;
  width:80px;
  height:80px;
}

它们将被视为文本，并相应地换行。由于它们的大小相同，因此结果是一个网格。此外，这意味着您不必拥有可整除的数字。例如，如果您有素数的元素，就不可能用它们制作出合适的表格。但是，在这里，它会为您处理好，就像这句话末尾的单词在最后一行的开头一样。

Answer 2

不，但这是响应式照片网格的示例：

无缝响应照片网格
http://css-tricks.com/seamless-responsive-photo-grid/