一个 html 行中多个详细信息标签的边框无法响应

Question

我的网站有问题：https://www.ars-neurochirurgica.com/。我有几个手风琴菜单，是我用纯 css 制作的，没有任何 javascript，一切都很完美，除了一个问题：

当我单击类别以展开标签时，所有其他与详细信息标签折叠且位于同一行的框将从 .div 展开边框。有什么办法可以不使用 javascript 来解决这个问题吗？我试图只在细节标签打开时绘制边框，但是我 运行 遇到了边框小于 .div 的问题，因为它只会分配给细节标签。最好的方法是能够 select 来自 details[open] 标签的父元素。然而，在做了一些研究后，仅使用 css3 是不可能的。任何人有想法如何解决这个问题？在手机上它工作得很好，因为只显示一行....

Answer 1

这里有一个快速解决方案，可以解决您描述的边界问题：

1. 从 .compactblock.

   中删除 border、padding-left 和 padding-right

2. 添加以下内容CSS:

   details {
       padding-left: 10px;
       padding-right: 10px;
   }
   
   details[open] {
       border: 1px solid var(--darkblack);
       height: 100%;
   }
   

基本上，这会强制 <details> 元素展开以填满整个高度，以便其边框包围展开的手风琴块的全部内容。它还将填充从 <div> 容器移动到 <details> 元素本身，以便边框的宽度与摘要区域匹配。

但是，因为这种方法仍然使用grid布局，你会注意到当你展开一个块时，元素仍然“跳”到“幻影”块下面在任何一行。要解决此问题，我强烈建议您根据评论中的建议，改用 flexbox。