Question

我正试图在ul-li上下文中对div元素中的两个span元素进行底部对齐。两个跨度应该相邻，它们之间没有间断。换行应限制在第二个跨度。对解决方案的所有尝试都将第二个跨度放在第一个跨度之下，或者将第二个跨度排在第一个跨度之下。如何让这两个跨度以“小型车，大巴士”的方式对齐？

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中两个跨距的底部对齐

1 个答案: