jsを適用した後に位置が壊れる理由

Question

画像をクリックした後に他の画像が「ジャンプ」するのはなぜですか？ http://almaweby.cz/reference.html 最初の画像をクリックしてみてください。テキストが下にスライドし、正しい画像になり、他の画像が飛びます。最初の画像ではなく、次の画像だけを書き直すにはどうすればいいですか？

そして、少しずつ。 2行目が最初の行と異なるように移動したのはなぜですか？ここで

は私の問題 https://jsfiddle.net/ytLqgk0v

$('.hook').on('click', function(evt) { 
 
\t $(evt.currentTarget).find('.popis').slideToggle(); 
 
});

.hook{ 
 
width: 30%; 
 
margin-right: 10px; 
 
display: inline-block; 
 
} 
 
.nahledy{ 
 
    width: 150px; 
 
    height: 50px; 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="hook"> 
 
\t \t <div class="nahledy"></div> 
 
\t \t <div class="popis" style="display: none;"> 
 
\t \t \t \t <p><b>LOrem ipsum</p> 
 
\t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="hook"> 
 
    <div class="nahledy"></div> 
 
\t \t <div class="popis" style="display: none;"> 
 
\t \t \t \t <p><b>Lorem ipsum again</p> 
 
\t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="hook"> 
 
    <div class="nahledy"></div> 
 
\t \t <div class="popis" style="display: none;"> 
 
\t \t <p>Lorem ipsum for third time</p> 
 
\t \t </div> 
 
\t \t </div>

`

Answer 1

のサンプルであるだけではなく、物事が浮いたのアライメントのためのフレキシボックスを使用してみてください。開始するには、親コンテナにdisplay: flex; flex-wrap: wrap;を追加し、そこから位置をクリーンアップします。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/