新しい要素を追加するときに列カウント列の並べ替えを維持するにはどうすればよいですか？

Question

「もっと読み込み」機能を備えたページがあります。私はcolumn-count CSSプロパティを使用して2つの列に分割します。

これ以上クリックすると、最初の4つのdivがソートされ、すべてが最初の列に表示されます。私は同じ場所に滞在してのみ、残りを追加する最初の4つのdivを必要があります以下の図面やhttps://elodywedding.com/reviews1

を確認してください。

ほとんどのブラウザで動作する解決策や回避策はありますか？

.parrent { 
 
    column-count: 2; 
 
}

<div class="parrent"> 
 
    <div class="block">content 1</div> 
 
    <div class="block">content 2</div> 
 
    <div class="block">content 3</div> 
 
    <div class="block">content 4</div> 
 
</div>

Answer 1

あなたがfloat: left;属性を使用する必要があります。それを使用する方法の例については以下を参照してください。

.parent { 
 
    width: 120px; 
 
} 
 

 
.block { 
 
    background-color: yellow; 
 
    height: 40px; 
 
    width: 40px; 
 
    margin: 10px; 
 
    float: left; 
 
}

<div class="parent"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
    <div class="block">5</div> 
 
    <div class="block">6</div> 
 
    <div class="block">7</div> 
 
</div>

Answer 2

私はあなたがflexboxを使用することをお勧めします。ガイドをチェックhere

.parrent{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    } 
 

 
.block { 
 
    width: 50%; 
 
}

<div class="parrent"> 
 
<div class="block">content 1</div> 
 
<div class="block">content 2</div> 
 
<div class="block">content 3</div> 
 
<div class="block">content 4</div> 
 
</div>