html - 如何在同一基线上对齐 3 个文本？

Question

到目前为止我所尝试的：http: //cssdesk.com/zhc9c

HTML：

<div class="container">
    <h1>FIRST</h1>
    <span class="second">This is second text</span>

    <span class="third">Third text</span>
</div>

CSS：

.container {
    padding-bottom:10px;
    border-bottom:1px solid;
    position:relative;
}

h1 {
    display:inline;
    margin:0;padding:0;
}

.second {
    margin-left:10px;
}

.third {
    position:absolute;
    right:0;bottom:10px;
}

问题：

1. 第三个文本似乎没有与其他文本在同一基线上对齐。
2. 因为我使用的是设置底部属性（第三个文本）的绝对位置，这意味着如果我更改容器的底部填充，我也需要设置此属性。是否可以使其“自动”调整？

Answer 1

我可以添加额外的标记吗？如果是这样，使用inline-blockwithvertical-align是一种可能的解决方案：

<div class="container">
  <div>
    <h1>FIRST</h1>
    <span class="second">This is second text</span>
  </div><div>
    <span class="third">Third text</span>
  </div>
</div>

div请注意，两个元素之间没有空格。这是因为inline-block受空格影响。

.container {
    padding-bottom:10px;
    border-bottom:1px solid;
}
.container * {
  display: inline-block;
  vertical-align: bottom;
}
.container div {
  width: 75%;
  text-align: left;
}
.container div + div {
  width: 25%;
  text-align: right;
}
h1 {
    display:inline;
    margin:0;padding:0;
}
.second {
  margin-left: 10px;
}

见http://cssdesk.com/pghv7

Answer 2

不删除就无法完成position:absolute。使用绝对定位会使元素脱离正常流程，因此您需要手动定位。

Answer 3

.third {
    position:absolute;
    right:0;
    top:0;
    height:20px;
    bottom:0;
    margin:auto;
}

你可以使用这个。它将文本设置在大约位置。