我有一个图像绕行的弹性盒布局，我想在单击图像时显示一些信息。该信息应显示在包含图像的行与其正下方的行之间，而不移动“列”。 这就是我想要的效果类型：http://olmenta.altervista.org（当您单击一本书时）。
这是我所做的：https://jsfiddle.net/fabhpnw9/3/
2
850var 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;
}
<div class="flex-container">
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
<div class="flex-item">
<div class="rectangle"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
由于弹性项目的大小发生变化，“列”正在移动。 我可以通过在文本中添加“position:absolute”来解决此问题，但随后文本与下一行发生冲突。 你知道我如何才能让列不移动并且文本不与下一行冲突吗？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
详细信息披露元素已经有一个浏览器内置的打开/关闭机制。那么为什么不使用它并修改其行为来满足我们的要求。
基本原则是
通过 CSS，我们可以控制内容的显示方式和位置。无论我们使用默认的块样式还是 Flexbox/Grid 布局，都将内容放置在常规文档流之外。它们是常规元素，所以基本上任何事情都会发生。
默认情况下，当用户点击其他地方时
detail/summary保持打开状态，我们需要一些 Javascript 来自动关闭当前“公开”的内容。当用户没有看到“关闭按钮”时，他们往往会感到困惑，所以我在那里放了一个。但是，单击信息框中的任意位置将其关闭。
我对此有点过分了，创建了一个响应式演示，完全忽略了您的代码（抱歉！），同时尝试尽可能接近示例站点。我评论了所有适用的地方。如果不清楚，请在评论中告诉我。
片段
/* * { outline: 1px dashed } /* for debugging */ /********************************/ /* some convenient global rules */ /********************************/ *, ::before, ::after { box-sizing: border-box } /* makes padding and border part of any element total size, margin never */ html, body { width: 100%; max-width: 100% } html { scroll-behavior: smooth } body { margin: unset; /* Kill default margin */ min-height: 100vh; line-height: 1.5; padding: 1rem; overscroll-behavior: contain; /* Check MDN for this */ } details, /* Remove CSS defaults */ summary { padding: 0; list-style: none } img { display: block; /* removes little whitespace below image */ width: 100%; /* stretch to full width */ aspect-ratio: 1 / 1.5; /* or height: auto, your choice */ object-fit: cover; /* fill parent, but clip when it doesn't fit */ } /* Responsive font sizing */ /* Using linear equation y=mx+b => y=0.00625x + 12 (320,14)(1280,20) */ html { font-size: calc(0.625vmin + 0.75rem) } body { font-size: 1rem } /************************************/ /* DEMO, base layout - mobile first */ /************************************/ .grid { display: flex; flex-flow: row wrap; justify-content: center; gap: 1rem; } .cell { /* fiddle with these properties */ flex-grow: 1; /* [OPTIONAL] */ min-width: min(12rem, 100%); /* set to desired width */ cursor: pointer; } .cell .preview { border: 1px solid Black } .cell .information { overflow: auto; overscroll-behavior: contain; position: fixed; /* within viewport */ z-index: 99999; /* over any body content */ inset: 0%; /* full screen */ gap: 1rem; padding: 4rem 1rem 1rem; background-color: hsl(0,0%,14%); color: hsl(0,0%,90%); cursor: default; } /****************************/ /* Some responsive behavior */ /****************************/ @media all and (min-width: 361px) { .cell .information { display: flex; flex-flow: row wrap; justify-content: center; inset: 30% 0% 0%; /* stay % from sides */ padding: 4rem; opacity: 0.985; } .cell .information img { width: auto; max-width: min(360px, 100%); } } /* Dito */ @media all and (min-width: 721px) { .cell { flex-grow: 0; /* [OPTIONAL] */ } } /* Allow content to grow, only relevant on +360px devices */ /* as * { flex: 1 } /**********************************************/ /* The .information 'x' close button behavior */ /**********************************************/ .cell .information .close { position: absolute; top: 0.75rem; right: 1.25rem; font-size: 2em; font-style: normal; cursor: pointer; } .cell .information .close::after { content: "\2715" } .cell .information .close:hover::after { content: "\2716" }如果我们切换到在
.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); }