Question

我需要将Invoice文本左对齐，并将Invoice＃右对齐。我希望他们两个也是底部对齐，否则下面的下划线看起来很奇怪。我有以下html：

<div style="height:75px; line-height:75px;">
    <div class="invoiceTitle">Invoice</div>
    <div class="invoiceNumber"># 12</div>
</div>

使用以下CSS：

.invoiceTitle
{
    float: left;
    font-size: 36px;
    vertical-align: bottom;
}

.invoiceNumber
{
    float: right;
    font-size: 16px;
    vertical-align: bottom;
}

我无法弄清楚如何将它们垂直对齐。在那里有额外的代码来展示我尝试过的失败的事情。

Answer 1

bool仅适用于内联块，无论何时使用vertical-align: bottom;移动到其他Block formatting context。您可以使用float＆amp; flexbox;

＆＃13;

align-items: flex-end

＆＃13;

.container {
  height: 75px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
  align-items: flex-end;
}

.invoiceTitle {
  flex: 1;
  font-size: 36px;
}

.invoiceNumber {
  font-size: 16px;
  flex: 1;
  text-align: right;
}

＆＃13;

Answer 2

我用相对/绝对定位做到了我更喜欢使用inline-block代替float 向下滚动以查看

＆＃13;

.container
{
    font-size: 36px;
    position:relative;
}
.invoiceTitle, .invoiceNumber{
   display:inline-block;
   position:absolute;
   bottom:0;
}
.invoiceNumber{
	right:0;
    font-size: 16px;
}

＆＃13;

  <div class="container">
    <div class="container" style="height:750px; line-height:75px;">
        <div class="invoiceTitle">Invoice</div>
        <div class="invoiceNumber"># 12</div>
    </div

＆＃13;

如何在容器div中垂直对齐具有不同字体大小的两个div

2 个答案: