0

在这个小提琴...

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;
}
4

3 回答 3

2

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

您需要将包含<div>的宽度设置为 100%，以便第二个<span>可以浮动到主容器的右边缘，而不是受其父容器宽度的限制（由于未指定宽度时 inline-block 元素的性质）

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

请注意，边距不会像在@Niels 答案中那样折叠，因为边距永远不会在浮动元素上折叠，即使它的流入块级后代也是如此

于 2013-05-03T16:59:03.840 回答
1

删除inline-block直接父级上的 ，它将元素缩小为其内容，使浮动设置无效。

示例：http: //jsfiddle.net/uZu6f/1/

于 2013-05-03T16:56:59.030 回答
0

您的跨度正确浮动，问题只是div您的span. 尝试添加：

.editIssueForm .commentContainer .comment div:first-child {
    width: 100%;
}

更新小提琴

于 2013-05-03T16:59:51.273 回答