如何在面板上添加垂直条？

Question

我只是想在我的面板的右侧上添加一个可以从上到下的垂直条。我更喜欢有一个类而不是内联CSS样式。有人能告诉我我失踪了吗？非常感谢提前！

注意：

• 我想在我的p面板中创建一个div来制作垂直条

这是我的代码：

PLUNKER

<p-panel>
 <p-header>
    Title
</p-header>

  <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea>
  <div class = "my-class"></div>

</p-panel>

这是我想要的照片：

Answer 1

在这里：https://plnkr.co/edit/K3SQnzRBjuZMRH0P61u3?p=preview

.ui-panel {
  position: relative !important;
}

.my-box {
  position: absolute; 
  right: 3px; 
  top: 3px; 
  bottom: 3px; 
  width: 40px; 
  background: red;
}

Answer 2

您可以使用flexbox布局。

覆盖ui-panel-content类以使用flex属性：

.ui-panel-content {
  padding: 0 !important;
  display: flex;
  justify-content: space-between; // for the textarea to be on the left and the border on the right
}

以下是您的面板HTML内容：

<div class="panelContent">
      <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea>
    </div>

<div class="panelBorder"></div>

及其相关的CSS：

.panelContent {
  padding:5px;
}

.panelBorder {
  background: red; 
  width: 4px;
}

请参阅Plunker

Answer 3

如何放入div，给它一些宽度和一些高度（你喜欢什么），给它位置：绝对;然后右：0;和位置：固定？

example{
background-color:red;
width:5%;
height:100%;
right:0%;
position:absolute;
position:fixed;
}

或者代码太简单了？但这是一个建议。