是否有一种非css的方式来垂直包装一列框

Question

我有一个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中是否有替代方案，或者我需要在其他地方调查?我必须求助于(呃)桌子吗?

Answer 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>