CSS列の数を隠しと組み合わせて

Question

ユーザーがオプションとして選択した内容に応じて、2つの列に9つのブロックが表示される動的なページがあります。各オプションには別々のブロックがあります。最初はすべてのブロックが非表示になっています。ユーザーがオプションを選択すると、ブロックが表示され、自動的に2つの列に配置されます。

ユーザーが最後のオプションを選択すると、列カウントの最後のブロックが表示されるとします。

ここで、この最後のブロックは、スペースや余白を失うことなく、左側に表示されます。私が得ている結果は、ブロックが右側に現れていることです。私はそれが欲しくないのです。私は間違っているように見える。

私は例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; 
} 

Answer 1

2つの問題があります。表示する非表示クラスを変更します。可視性を非表示に設定すると、要素が見えなくなりますが、高さがゼロであってもDOMにはまだ存在しているので、領域を占有します。

第2に、before：およびafter：psuedo要素もDOM内にスペースを占有するため、beforeは最初の列のコンテンツとしてカウントされ、divを次の列にプッシュします。

Answer 2

：なし。 visibility：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>