是否有非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中是否有替代方法，还是我需要在其他地方进行调查？ 我必须诉诸（ugh）桌子吗？

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>