有没有一种非 CSS 方式来垂直包装一列盒子？答案

【问题标题】：Is there an non-CSS way to wrap a column of boxes vertically?有没有一种非 CSS 方式来垂直包装一列盒子？
【发布时间】：2015-08-31 23:21:30
【问题描述】：

我有一个 div，它在父 div 中形成带边框的框（包含多个元素）。当我使用 column-count 使该内容流入两列时，第一列中的最后一个框被分解。如何让列流仅在框之间中断？框周围的边框应与该框保持一致，要么完全在第一列，要么完全在第二列。

HTML：

<h2>Browse Data Details by Category</h2>
<div class="categories">
  <div id="categories-list" class="categories__column"></div>
</div>

<script>
  var categories = {{ categories }} ;
  var oneColumn = "";
  for (var i in categories) {
    oneColumn = oneColumn +
      "<div class=\"category\">" +      // put box around category block
      "<div class=\"category__name\">" + categories[i].title + "</div>" +
      "<p>" + categories[i].description + "</p>" +
      "</div>";
  }
  document.getElementById("categories-list").innerHTML=oneColumn;
</script>

CSS：

.categories .category {
  margin: 5px;
  padding: 15px;
  border: solid 1px silver;
  word-wrap: break-word;
}

.categories__column {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  -webkit-column-count: 2; */
}

.category__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

CSS break-inside: avoid-column 看起来很有希望，但显然这在 Chrome 或 Firefox 中没有效果（目前仅在 Opera 中？）。 CSS中是否有替代方案，还是我需要在其他地方进行调查？我必须求助于（呃）桌子吗？

【问题讨论】：

您是否试图将文本包装在一个列中而不溢出到另一列？
不完全是。我有包含div 和p 的盒子，每个盒子周围都有银色边框。多个框是通过 HTML 底部的 JavaScript for 循环组装而成的。文本确实保留在每个框内 - 问题是第一列底部框的一部分保留在那里，部分移动到第二列。

标签： javascript jquery html css jquery-plugins

【解决方案1】：

将display: inline-block; 添加到.categories .category。

请注意，在示例中，列的宽度可能足以在单个列中并排容纳多个框。限制容器的宽度以阻止它。

.categories .category {
  margin: 5px;
  padding: 15px;
  border: solid 1px silver;
  word-wrap: break-word;
  display: inline-block;
}

.categories__column {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  -webkit-column-count: 2; */
}

.category__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

<h2>Browse Data Details by Category</h2>
<div class="categories">
  <div id="categories-list" class="categories__column"></div>
</div>

<script>
  var categories = [1, 2, 3] ;
  var oneColumn = "";
  for (var i in categories) {
    oneColumn = oneColumn +
      "<div class=\"category\">" +      // put box around category block
      "<div class=\"category__name\">" + categories[i].title + "</div>" +
      "<p>" + categories[i].description + "</p>" +
      "</div>";
  }
  document.getElementById("categories-list").innerHTML=oneColumn;
</script>

【讨论】：