是否有一種非CSS方式來垂直包裝一列框？

我有一個div在父div內形成有邊框（包含多個元素）。當我使用列計數使內容流入兩列時，第一列中的最後一個框被打破。如何才能讓列流只在兩個框之間打破？盒子周圍的邊框應該與該盒子保持一致，要麼全部在第一列中，要麼全部在第二列中。是否有一種非CSS方式來垂直包裝一列框？

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中有沒有其他選擇，還是我需要調查其他地方？我必須訴諸（呃）表嗎？

來源

2015-08-31 user962915

你試圖包裝列中的文本不會溢出到另一列？ – DinoMyte

不完全。我有一個包含'div'和'p'的盒子，每個盒子周圍都有一個銀色邊框。多個盒子通過HTML底部的JavaScript for for循環組裝起來。文本保留在每個盒子中 - 問題在於第一列中的底部框的一部分停留在那裏，一部分移動到第二列。 – user962915

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

來源

2015-09-01 03:55:58

是否有一種非CSS方式來垂直包裝一列框？

回答

相關問題