CSS Column-Count與隱藏組合

我有一個動態頁面，顯示2列中的9個塊，具體取決於用戶選擇的選項。每個選項都有一個獨立的塊。最初所有的塊都是隱藏的。一旦用戶選擇該選項，該塊將變爲可見並自動定位在2列中。CSS Column-Count與隱藏組合

假設用戶選擇最後一個選項，並且列計數中的最後一個塊將變爲可見。

現在，我期望的是，這最後一個塊將在左側沒有任何失去的空間或邊距或任何。我得到的結果是塊出現在右側，我不想要。我看起來錯了。我有一個例子here。

任何關於如何防止這種不需要的行爲的想法？

集裝箱塊：

.container { 
-webkit-column-count: 2; 
    -moz-column-count: 2; 
     column-count: 2; 

-webkit-column-gap: 116px; 
    -moz-column-gap: 116px; 
     column-gap: 116px; 

-webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 
}

隱藏塊：

.hidden { 
    visibility: hidden; 
    height: 0; 
}

來源

2017-04-13 Matti.b

有兩個問題。將隱藏的類更改爲「display：none」。將可見性設置爲隱藏狀態會使該元素不可見，但即使高度爲零，它仍然存在於DOM中，因此佔用空間。第二，你之前和之後：psuedo元素也佔用了DOM中的空間，所以之前算作第一列中的內容將div推到下一列 – sn3ll

正確，我現在得到了它的工作。這確實是顯示：無和前後的陳述。謝謝，如果你把它作爲答案，我會給你信貸。 –

有兩個問題。將您的隱藏課程更改爲顯示：無。將可見性設置爲隱藏狀態會使該元素不可見，但即使高度爲零，它仍然存在於DOM中，因此佔用空間。

二，你的before：和after：psuedo元素也佔用了DOM中的空間，所以before之前算作第一列中的內容，將div推到下一列。

來源

2017-04-13 17:28:47 sn3ll

您需要使用溢出或顯示：無;可見性：hidden不會從流中拿走元素，它只能被繪製。

例如：https://jsfiddle.net/Lh1v65zj/5/

.container { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    -webkit-column-gap: 116px; 
 
    -moz-column-gap: 116px; 
 
    column-gap: 116px; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
.containerSpan { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
.col-100 { 
 
    width: 100% 
 
} 
 

 
.col-100::before, 
 
.col-100::after { 
 
    width: 100%; 
 
    height: 0; 
 
    display: block; 
 
    clear: both; 
 
    content: "" 
 
} 
 

 
.containerSpan { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
.hidden { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<div class="col-100 container"> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>1: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>2: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>3: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>4: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>5: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>6: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>7: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="hidden containerSpan"> 
 
    <p><b>8: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
    <div class="containerSpan"> 
 
    <p><b>9: </b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac finibus magna, nec euismod dolor. Donec ac urna et lacus pellentesque efficitur. Sed dignissim ante sit amet leo gravida varius ut euismod est. Nulla magna augue, pharetra 
 
     a eleifend vitae, semper a dolor. Nam tempus lacus ac imperdiet suscipit. In hac habitasse platea dictumst. Sed ultrices turpis vitae iaculis vestibulum. Nullam ullamcorper mattis lacus nec accumsan. Aliquam efficitur enim in odio facilisis cursus. 
 
     Quisque eu placerat diam, eget consectetur ex. 
 
    </p> 
 
    </div> 
 
</div>

來源

2017-04-13 12:40:44

也是正確的，但與@ sn3ll相比，準確度稍低，因此學分將按他的方式排列。感謝您的迴應。 –

@ Matti.b給予學分，你應該提出答案並接受你選擇的答案。主要的一點是，能見度：隱藏的;不會從文檔流中的dom /空格刪除元素。高度：0需要溢出：隱藏起來有效並隱藏元素。顯示：無;從DOM中移除元素，但位置：固定或絕對+座標可以完成這項工作，保持內容的可訪問性。許多方式和原因爲什麼/如何做你想要的東西。關於樣式展示：沒有一個是高效的，關於可訪問性，其他方式也可以有其目的;）。 –

CSS Column-Count與隱藏組合

回答

相關問題