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

あなたのセレクターは実際にうまく機能しています..

親の幅によって制限されるのではなく、2 番目のコンテナがメイン コンテナの右端にフロートできる<div>ように、コンテナの幅を 100% にする必要があります(幅が指定されていない場合のインライン ブロック要素の性質による)。<span>

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

@Nielsの回答のようにマージンが崩壊しないことに注意してください。これは、フロー内のブロックレベルの子孫であっても、フロート要素でマージンが崩壊することはないためです。

于 2013-05-03T16:59:03.840 に答える
1

直接の親の を削除するinline-blockと、要素がそのコンテンツに縮小され、float 設定が無効になります。

サンプル: 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 に答える