是否有非CSS方式垂直包裹一列盒子？

Question

I have a div that forms bordered boxes (containing multiple elements) within a parent div. When I use column-count to make that content flow into two columns, the last box in the first column is broken up. How can I get the column flow to break only between boxes? The border around the box should stay with that box, either wholly in the first column or wholly in the second column.

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 looked promising, but apparently that has no effect in Chrome or Firefox (only in Opera so far?). Is there an alternative to that in CSS, or do I need to investigate elsewhere? Must I resort to (ugh) tables?

Answer 1

Add display: inline-block; to .categories .category .

Note that in the example the columns may be wide enough to accommodate multiple boxes side by side in a single column. Limit the width of the container to stop that.

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