为什么应用js后位置坏了

Question

为什么点击某些图片（应用js）后其他图片会“跳”下来？ http://almaweby.cz/reference.html 尝试点击第一张图片..关于它的文字会向下滑动，这是正确的，然后其他图片会向下滑动..如何重写代码以仅向下移动下一行而不是第一行？

而且有点离题。为什么第二行的移动方式与第一行不同？

这是我的问题的一个示例 https://jsfiddle.net/ytLqgk0v

$('.hook').on('click', function( evt ) {
	$(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">
		<div class="nahledy"></div>
		<div class="popis" style="display: none;">
				<p><b>LOrem ipsum</p>
		</div>
		</div>

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

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

`

Answer 1

尝试使用 flexbox 进行对齐，而不是仅仅让事物浮动。首先，将display: flex; flex-wrap: wrap; 添加到父容器，然后从那里清理位置。

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