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/

为什么在应用j

1 个答案: