CSS div 中两个跨度的底部对齐

Question

我试图在 ul-li 上下文中将 div 元素中的两个 span 元素底部对齐。两个跨度应该是相邻的，它们之间没有中断。换行应限制在第二个跨度内。解决方案的所有尝试要么将第二个跨度放在第一个跨度下方，要么将第二个跨度换行到第一个跨度下方。如何让两个跨度以 "small-car, big-bus" 方式对齐？

CSS:

.div
{
  display:table-cell;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}
.divBottomBoarder
{
  top: 20px;
  margin: 0px;  
  padding: 16px 2px 2px 2px;  
  display: inline-block;
  border-width: 2px;
  border-bottom: 2px black solid;
  width: 100%;
}
.subject
{
  color: white;
  padding: 1px 3px 2px 3px;
  margin-right: 10px;
  background-color: rgb(64,128,128);
  font-weight: bold;
  float: left;
  vertical-align: bottom;
}
.content 
{
  bottom: 0px;
  text-align: left;
  vertical-align: bottom;
}

HTML:

<ul>
  <li>
  <div class='divBottomBoarder'>
  <span class='subject'>A Subject:</span>
  <span class='content'>Extended descriptive text that could line-wrap. If it does, the content text should be left-justified, bottom-aligned with the subject text, dynamically extending upward as required, <b><i>without</i></b> wrapping below the Topic text. Also, the subject and content spans should not line-wrap. The list dot, subject text, and content text should all be bottom-aligned immediately above the bottom border.</span>
  </div>
  </li>
    <ul>
      <li>
          <div class='divBottomBoarder'>
             <span class='subject'>A Child Subject:</span>
             <span class='content'>More descriptive text that could also line-wrap. Again, the content text should be left-justified, bottom-aligned with the subject text, dynamically extending upward as required, <b><i>without</i></b> wrapping below the subject text. Also, the subject and content spans should not line-wrap.  The list dot, subject text, and content text should all be bottom-aligned immediately above the bottom border.</span>
          </div>
      </li>
    </ul>
</ul>

Fiddle me this.

Answer 1

您可以添加：

.divBottomBoarder  {
  display: flex;
  align-items: flex-end;
}

https://jsfiddle.net/2mpb7493/1/

CSS div 中两个跨度的底部对齐

CSS Bottom-alignment of two spans within a div

html

css

vertical-alignment

word-wrap