1

我有一个表格，用户将数据输入到列中。每次用户输入数据时，都会创建一个新列。过了一会儿，他们有很多列，我需要它们来换行。

我知道如何将文本包装在列中，但我需要将整列包装在第一列下方，依此类推。

4

4 回答 4

2

您不应该为此使用表格。您应该使用带有“float:left”CSS 样式的 div。

这是一个工作示例：http: //jsfiddle.net/3MEJ5/

于 2012-06-05T17:32:57.983 回答
1

<div class="datainput">不要使用表格列，而是尝试使用以下 CSS将每个输入数据单独作为一个表格，包裹在 a中：

.datainput {display: inline-block; vertical-align: top;}

现在，不要添加新列，而是复制容器。这会将它放在现有的旁边，并在需要时包装。

如果包装失败，请将此 CSS 应用于包含所有这些容器的元素：

word-break: break-all;
于 2012-06-05T17:29:24.440 回答
1

其实并不简单。表/行/列结构相当僵化。为了实现您所描述的，您必须将每个单元格创建为一个巨大的外部单元格中的单单元格表。然后他们会包装。但是，它们可能无法很好地对齐。

于 2012-06-05T17:27:13.397 回答
-1

现在一个很好的解决方案是使用 CSS3 Columns。

您可以在容器上设置 CSS 属性，子项将向下流动。

您有以下选择：

div {
  /* Make columns with a min width of 100px, create multiple columns as space permits */
  column-width: 100px;
  column-count: 3; /* Divide the text in a <div> element into three columns */
  column-gap: 40px;  /* Specify a 40 pixels gap between the columns */
  /* Specify the width, style, and color of the rule between columns */
  column-rule: 4px double #ff00ff;
}

有关详细信息，请参阅：https ://www.w3schools.com/cssref/css3_pr_columns.asp

有关浏览器支持，请参阅：https ://caniuse.com/#search=css3%20columns

于 2019-04-01T17:18:23.720 回答