[英]Aligning HTML panels vertically using CSS
I'm trying to place forms vertically within a canvas.我正在尝试将 forms 垂直放置在 canvas 内。 I have two panels, which when they're set to absolute are placed as, I would expect, on the right of the page (but occupying the same space).
我有两个面板,当它们设置为绝对时,我希望它们放置在页面的右侧(但占用相同的空间)。 The complication is that the panels have collapse buttons at the top and so hard coding an offset wont work (I need the lower one to move up when the upper one is collapsed).
复杂之处在于面板顶部有折叠按钮,因此硬编码偏移量将不起作用(当上层折叠时,我需要下层向上移动)。
My CSS for the forms is as below:我的 forms 的 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;
} }
The CSS on the buttons looks like this:按钮上的 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;
} }
Placed using the above code, it looks like this:使用上面的代码放置,它看起来像这样:
When I change the settings to relative, this happens:当我将设置更改为相对时,会发生这种情况:
Any help would be appreciated.任何帮助,将不胜感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.