我有一个图像绕行的弹性盒布局，我想在单击图像时显示一些信息。该信息应显示在包含图像的行与其正下方的行之间，而不移动“列”。 这就是我想要的效果类型：http://olmenta.altervista.org（当您单击一本书时）。
这是我所做的：https://jsfiddle.net/fabhpnw9/3/
2
921var coll = document.getElementsByClassName("rectangle");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.flex-container {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.rectangle {
width: 200px;
height: 50px;
background-color: red;
cursor: pointer;
}
.text {
display: none;
position: absolute;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit
由于弹性项目的大小发生变化，“列”正在移动。 我可以通过在文本中添加“position:absolute”来解决此问题，但随后文本与下一行发生冲突。 你知道我如何才能让列不移动并且文本不与下一行冲突吗？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
如果我们切换到在
.flex-item上切换active类，我们可以为活动.flex-item添加高度，以便为.text留出空间。注意：为了正确定位
.text元素，重要的是不要定位.flex-items（或position: static）。否则.text的left: 0将位于父级.flex-item的左侧。这是一个工作示例的片段：
var coll = document.getElementsByClassName("rectangle"); var i; for (i = 0; i x.classList.remove('active')) this.parentElement.classList.add("active"); }); }.flex-container { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .flex-item { width: 200px; } .rectangle { width: 200px; height: 50px; background-color: red; cursor: pointer; position: relative; } .flex-item.active { height: 155px; } .flex-item:not(.active) .text { display: none; } .text { position: absolute; left: 0px; width: 100%; padding: 10px; text-align: center; margin-top: 5px; height: 100px; background: grey; color: #fff; box-sizing: border-box; } /*tooltip styles*/ .flex-item.active .rectangle::after { content: ''; border: solid 10px transparent; border-bottom: solid 10px grey; position: absolute; bottom: -5px; left: calc(50% - 5px); }