html - 如何使用 :last-child pseudo 将特定元素右对齐

Question

在这个 fiddle ...

http://jsfiddle.net/jeljeljel/sARz2/

我需要将加粗的日期值与父容器的右侧对齐。使用 :last-child 伪元素我将如何调整 css 来实现这一点？我在下面的 CSS 中对此进行了尝试。

HTML

<div class="editIssueForm">
    <div class="commentContainer">
        <div>
            <div class="comment">
                <div>
                    <span>Entered by: Paul Reid</span>
                    <span>4/3/2013 3:45 PM CST</span>
                </div>
                <div>ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar, lectus vitae rutrum accumsan, ligula mauris bibendum magna, vel vestibulum erat ante vel metus. Integer blandit, libero eu dignissim pellentesque, massa lectus placerat mi, eu adipiscing neque velit vitae turpis. Maecenas iaculis dui in urna iaculis mattis. Suspendisse ut erat turpis. Nullam pulvinar fringilla semper. Nulla facilisi. Nunc eu tortor eu ipsum adipiscing facilisis. Proin lacinia quam non nulla fermentum a cursus nunc consequat. Suspendisse id diam orci, sed pretium nibh. Sed eros tortor</div>
            </div>
        </div>
    </div>
</div>

CSS

.editIssueForm {
  border: 1px solid lightblue;
  width: 300;
}
.editIssueForm .commentContainer {
  width: 300;
  height: 200;
  overflow-y: scroll;
}
.editIssueForm .commentContainer .comment {
  padding-left: 5px;
}
.editIssueForm .commentContainer .comment div:first-child {
  font-weight: bold;
  display: inline-block;
}

这些伪选择器不起作用。如何调整 css 使其正常工作？

.editIssueForm .commentContainer .comment div:first-child span:first-child {
  float: left;
  padding-left: -5px;
}
.editIssueForm .commentContainer .comment div:first-child span:last-child {
  float: right;
}

结束

.editIssueForm .commentContainer .comment div:first-child:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.editIssueForm .commentContainer .comment:nth-child(n+2) {
  border-top: 1px solid #ddd;
  padding-top: 5px;
  margin-top: 5px;
}

Answer 1

您的选择器实际上工作正常..

您需要提供包含 <div> 的内容宽度为 100%，这样第二个 <span>可以 float 到主容器的右边缘，而不是受其父容器宽度的约束(由于未指定宽度时内联 block 元素的性质)

http://jsfiddle.net/Adrift/mFBfB/

---

^{请注意，边距不会像@Niels 回答中那样折叠，因为边距永远不会在 float 元素上折叠，即使是其流入的 block 级后代也是如此}