Question

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

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>

是否有一种非CSS方式来垂直包装一列盒子？

1 个答案: