0

これはカバーされていると確信していますが、何を検索すればよいかわかりません。

1 div の中に 2 つの div があります。2 つの内部 div Ifloat:leftには 2 つの列があります。最初の div はクラス .username です。2 番目の div はクラス .commentText のものです。外側の div は .comment と呼ばれます。

.comment{
  border: 0px;
  clear: both;
}

.commentText, .username {
  float:left;
}

ただし、2 つの内側の div のコンテンツの合計が外側の div の幅よりも大きい場合、2 番目の内側の div は最初の内側の div より下になります。

例: 下の図では、タイムスタンプはユーザー名 div にあります。コメントは commentText div にあります。タイムスタンプの下に下のコメントの隆起があることに注意してください。

私が得るもの：

私が得るもの

私が欲しいもの：

私が欲しいもの 私が望むのは、一番下のコメントの commentText が、1行だけで垂直方向に伸びる場合の幅を維持することです。また、各コメントの .username div の幅が異なることに注意してください。

ありがとう！

編集: max-width: .username に 20% 、 max-width: .commentText に 79% を使用する適切なソリューションを見つけましたが、これに関する問題は、ユーザー名の幅を制限したくないことですdiv。ユーザー名が短く、コメントが長い場合、外側の div の右側までは表示されません。

4

1 に答える 1

0

すべてのエポックのすべてのブラウザーで相互互換性があるわけではないことは理解していますが、@bybe は、 display:table-cell を使用するためのフィドルを提案してくれました。これはうまくいきます。

.commentText, .username {
    display:table-cell;
    margin:0px 0px 10px 0px;
}

.username {
    padding: 0px 15px 0px 0px;
    white-space:nowrap;
}
于 2013-02-06T01:07:23.237 に答える