2

テキストに従って div を引き伸ばすにはどうすればよいですか

ユーザーが投稿したテキストで div の高さを伸ばしたい

スクリーンショットを見てください。

CSS :

.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right:     15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; height: auto; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat     17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }

HTML :

<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
&nbsp;&nbsp;smith (date)
</div>
<div class="rp">
<a href="#comment">reply ↓&lt;/a>
</div>
</div>

画像

コメント画像 => [コメント ビュー][1]

親 ：

<div class="comment">
<div class="cmntHeader">Comments</div>
<div class="cmntBody">
<center>
....
</center>
</div>
</div>
4

5 に答える 5

1

外側のコンテナーfloat: leftに CSS プロパティを追加してみてください。

.cmnt .body{ float: left; width: 570px; background: #333333; min-height: 90px; height: auto; }

ここにあなたのためのフィドルがあります

http://jsfiddle.net/znQa8/

それが役に立てば幸い。

于 2013-01-11T13:15:13.440 に答える
1

コンテナーの高さは、指定されていない場合、子 (フロートされていない) 要素に従って自動的に調整されます。div (class=text) はフローティングであるため、その高さは考慮されません。フロートを使用したときはいつでも、高さの問題を解決するために体系的にクリアしてみてください。

<div class="text">
...
</div>
<div style="clear:both"></div>
于 2013-01-11T13:40:15.023 に答える
0

何が起こっているかというと、フローティングの子を持つフローティング コンテナがあるということです。

この場合、フローティング コンテナは子ディメンションを「無視」します。これはおそらく、float の本当の主な目的 (ラップされたテキストにフローティング画像を持たせること) の実装の副作用です。

この記事では、フローティングの目的と回避策のリストを確認できます: http://www.ejeliot.com/blog/59

そして、これは私がこれまでのところ最良の解決策だと思うものです.micro clearfix（cssを入れて、必要なときにいつでも再利用できるのが最善です）： http://nicolasgallagher.com/micro-clearfix-ハック/

この css ブロックを css ファイルに追加するだけです。

/*THE CLEARFIX HACK*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

そして、clearfix クラスを「body」div に追加します。

jsfiddle: XZRH5

于 2013-01-11T13:47:54.210 に答える
0

min-heightあなたの解決策になります。

于 2013-01-11T13:19:29.033 に答える
0

追加する可能性があります：

div.body
{
height: auto;
}

しかし、それがレイアウト全体を殺していないかどうかはわかりません

My Head Hurts に関しては、フロートをクリアする必要があります。

.cmnt .body
{
    overflow: hidden;
}
于 2013-01-11T13:17:16.037 に答える