html - 使用 CSS 垂直对齐 HTML 面板

Question

我正在尝试将表单垂直放置在画布内。我有两个面板，当它们设置为绝对时，我希望它们放置在页面的右侧（但占用相同的空间）。复杂之处在于面板顶部有折叠按钮，因此硬编码偏移量将不起作用（当上层折叠时，我需要下层向上移动）。

我的表单 CSS 如下：

#properties-tab {
position: absolute;
display: inline;
top: 16px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border: 0;

}

#tag-tab {
position: absolute;
display: inline;
top: 16px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border: 0;

}

按钮上的 CSS 如下所示：

#job-info {
position: absolute;
display: inline;
top: 34px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

}

#tag-info {
position: absolute;
display: inline;
top: 34px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

}

使用上面的代码放置，它看起来像这样：

当我将设置更改为相对时，会发生这种情况：

任何帮助，将不胜感激。

标签： htmlcss

Answer 1

Flexbox 很好地解决了这个问题，我怀疑 grid 也可能给出了解决方案：

.flex-container {
top: 16px;
right: 20px;
position: absolute;
display: flex;
flex-wrap: wrap;
width: 20%;

}

谢谢@Sfili_81