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

Question

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

当我单击类别以展开标签时，与位于同一行的详细标签一起折叠的所有其他框将从 .div 展开它们的边框。有没有办法在不使用 javascript 的情况下解决这个问题？如果详细信息标签打开，我尝试仅绘制边框，但是我遇到了边框小于 .div 的问题，因为它只会分配给详细信息标签。最好的方法是能够从 details[open] 标签中选择父元素。然而，在做了一些仅用 css3 不可能的研究之后。任何人都知道如何解决这个问题？在移动设备上它工作得很好，因为只显示一行....

Answer 1

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

1. 从中删除border、padding-left和。padding-right.compactblock

2. 添加以下 CSS：

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

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

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