在表中包装列答案

【问题标题】：Wrapping columns in a table在表中包装列
【发布时间】：2012-05-29 15:50:34
【问题描述】：

我有一个表格，其中一行有 10 个固定宽度的列，在重新调整页面大小时调整表格的最佳方法是什么。

例如：如果我调整页面大小并且只有 5 列适合，我如何将剩余的 5 列换成新行？

我正在寻找最佳方法的指针。任何建议将不胜感激

谢谢

【问题讨论】：

我建议不要包装列，因为它使表格很难阅读。
您能否发布相关的HTML 结构以更好地理解您的目标？此外，任何相关的CSS 都将有助于为您提供准确的答案。
@Jim 所以，table 可能不是最好的解决方案。在页面调整大小时动态换行的页面上显示固定宽度图像列表的最佳方式是什么。
一个使用javascript的解决方案。当我计算页面的宽度，然后将其发送回服务器以重新计算可以适合每一行的图像数时。但我试图避免这样做。
如果是图像列表，那么列表元素ul 或ol 可能是此类布局的更好选择。

标签： html css asp-classic styles

【解决方案1】：

如果你想重排单元格，我猜你想要的不是表格，只是对齐的元素。为此，最好使用浮点数，像这样......

<div style="overflow:auto">
    <div style="width:200px;float:left">A</div>
    <div style="width:200px;float:left">B</div>
    <div style="width:200px;float:left">C</div>
    <div style="width:200px;float:left">D</div>
    <div style="width:200px;float:left">E</div>
    <div style="width:200px;float:left">F</div>
    <div style="width:200px;float:left">G</div>
</div>

（最好将样式放在 CSS 文件中，使用类等。我使用了 divs 但与样式 LIs 相同，除非您可能需要在样式中添加 display:block）。此外，如果单元格的内容可以有不同的高度，您可能还需要添加 height。

【讨论】：

将overflow: auto 添加到父div，不再需要clear: both 的额外元素。
不知道，我现在只是默认添加。当我不添加清除时，有时我会在其右侧获得下一个块，即使该块在容器 div 之后，也不确定它何时发生或为什么，但我只是用清除来解决它
将overflow:auto添加到父div可以解决这个问题。然后可以从您的源中删除clear:both，使其更干净、更语义化。我把它留给你;）
已更改，感谢您提供的信息，每天学习新知识