html - 将 div 底部的元素与动态边框对齐(绝对位置 + 边距)

Question

我目前正在尝试制作一个宽度可变且右侧有边框的元素。边框应始终与文本元素保持一定距离，文本元素的大小和数量各不相同。所以边界应该动态移动。如果我将我的文本元素放在动态 div 中，一切都很好，但文本必须位于页面底部。所以我尝试使用 position: absolute;底部:0px；左: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 上指定高度，但是您使用一个不可见的(因为是空的)内联 block div 垂直扩展了这个容器。然后对齐底部的内联 block 组件。

在这里查看 fork 的代码笔:http://codepen.io/anon/pen/ONLpOw (我添加了一些内容，这样您就不必在每个 block 上指定固定高度:content-extender 高度定义了整个状态栏的高度)。

这就是你想要做的吗？