将div底部的元素与动态边框对齐（绝对位置+边距）

Question

我目前正在尝试制作一个宽度可变且右边有边框的元素。边框应始终远离文本元素一定距离，文本元素的大小和数量各不相同。所以边界应该动态移动。如果我将文本元素放在动态div中但文本必须位于页面底部，这一切都可以正常工作。所以我尝试使用position: absolute; bottom: 0px; left: 0;。但我了解到，由于绝对定位margin不再有效。

您可以找到我的代码here on codepen.io。当前状态是工作动态边框，但文本位于顶部。我注释掉了非工作部分，您可以在CSS文件的底部找到它。

那么，将我的文字放在div底部的更好/有效的方法是什么，但右边还有一个动态边框？

.statusbar {
  padding: 0;
  margin: 0;
  height: 150px;
  width: 50vw;
  background: #303030;
  color: white;
}
.statusbar .statusbar-content {
  width: calc(100vw - 48px);
  height: 150px;
  margin-left: 48px;
  float: left;
}
.statusbar .statusbar-content .statusbar-col {
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  float: left;
  border: none;
  border-right: 1px solid #505050;
  position: relative;
  height: 110px;
}
.statusbar .statusbar-content #appserver-col,
.statusbar .statusbar-content #command-col,
.statusbar .statusbar-content #connection-col {
  margin-left: 23px;
}
.statusbar .statusbar-content #connection-col {
  border: none;
}
.statusbar .statusbar-content .col-content {
  padding-right: 23px;
}
.statusbar .statusbar-content .content-row {
  position: relative;
  height: 110px;
}
.statusbar .statusbar-content .content-item {
  display: inline-block;
  margin-right: 23px;
}

<div class="statusbar">
  <div class="statusbar-content">
    <div class="statusbar-col" id="database-col">
      <div class="col-content">
        <div class="content-row">
          <div class="content-item">Test_Text_1</div>
          <div class="content-item">Test_Text_2</div>
        </div>
      </div>
    </div>
  </div>

修改

输出最终应该如下所示。

Answer 1

这有效：

<强> HTML

<div class="statusbar">
    <div class="statusbar-content">
        <div class="statusbar-col" id="database-col">
            <div class="col-content">
                <div class="content-row">
                    <div class="content-extender"></div>
                    <div class="content-item">Test_Text_1</div>
                    <div class="content-item">Test_Text_2</div>
                </div>
            </div>
        </div>
    </div>          
</div>

<强> CSS

.col-content {
    padding-right: 23px;
}

.content-row .content-extender {
  display: inline-block;
  height: 110px;
}

.content-item {
    display: inline-block;
    margin-right: 23px;
    vertical-align: bottom;
}

您没有在content-row上指定高度，但是使用不可见（因为空）内联块div垂直扩展此容器。然后在底部对齐内联块组件。

在这里看到分叉的代码：http://codepen.io/anon/pen/ONLpOw（我添加了一些东西，所以你不必在每个块上指定一个固定的高度：content-extender高度定义整个状态栏的高度。）< / p>

这是你想要做的吗？

Answer 2

Flexbox可以做到这一点：

.statusbar .statusbar-content .content-row {
  position: relative;
  height: 110px;
  display: flex;
  align-items: flex-end;
}

＆＃13;

＆＃13;

.statusbar {
  padding: 0;
  margin: 0;
  height: 150px;
  width: 50vw;
  background: #303030;
  color: white;
}
.statusbar .statusbar-content {
  width: calc(100vw - 48px);
  height: 150px;
  margin-left: 48px;
  float: left;
}
.statusbar .statusbar-content .statusbar-col {
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  float: left;
  border: none;
  border-right: 1px solid #505050;
  position: relative;
  height: 110px;
}
.statusbar .statusbar-content #appserver-col,
.statusbar .statusbar-content #command-col,
.statusbar .statusbar-content #connection-col {
  margin-left: 23px;
}
.statusbar .statusbar-content #connection-col {
  border: none;
}
.statusbar .statusbar-content .col-content {
  padding-right: 23px;
}
.statusbar .statusbar-content .content-row {
  position: relative;
  height: 110px;
  display: flex;
  align-items: flex-end;
}
.statusbar .statusbar-content .content-item {
  display: inline-block;
  margin-right: 23px;
}

＆＃13;

<div class="statusbar">
  <div class="statusbar-content">
    <div class="statusbar-col" id="database-col">
      <div class="col-content">
        <div class="content-row">
          <div class="content-item">Test_Text_1</div>
          <div class="content-item">Test_Text_2</div>
        </div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;