2

コメントを含む div コンテナーがあります。左にフロートするように設定されており、アバター コンテナがその隣にあります (これも左にフロートします)。これがスクリーンショットです。

ここに画像の説明を入力

白いコメント コンテナーの css:

.comment_content{
    float: left;
/*
    width: 86%;
*/
    margin-left:5px;
    padding-left: 15px;
    background: url(http://video.chubbyparade.com/img/arrow_left.png) no-repeat 0 8px;
}

このコンテナーを設定して、親コンテナーの残りのスペースを 100% 埋めたいと考えています。

width:100% に設定すると、改行が発生します (親コンテナーの幅の 100% を埋めるため)。

残りのスペースを埋めるようにコメント コンテナーを設定するにはどうすればよいですか? width:86% に設定してこれを行っていました。しかし、ウィンドウのサイズを変更すると見栄えがよくありません (レイアウトは固定幅ではありません)。

テーブルは簡単な方法です。しかし、cssで解決策はありませんか？

4

2 に答える 2

3

Dave Haigh のソリューションは合理的なアプローチです。フロートの使用を本当に強く主張する場合は、コンテナーの左側をポートレートの幅までパディングしてから、ポートレートに 100% の左マージンを与えることができます。ちょっとばかげていますが、うまくいきます。

jsFiddle デモ: http://jsfiddle.net/Malkyne/FZcPq/

于 2012-06-01T20:50:40.657 に答える
3

コメント ボックスをフローティングする代わりに、アバターの画像をクリアするのに十分な高さの余白を残してください。たとえば、アバターの幅が 150px の場合、margin-left: 155px;コメント ボックスが div (ブロック要素) であるため、コメント ボックスを指定すると、親 div の残りのスペースが自然に埋められます。

jsfiddle の例: http://jsfiddle.net/UHksQ/

スタイリング：

.avatar {
    float: left;
    width: 150px;
}
.comment {
    margin-left:155px;
}
于 2012-06-01T20:19:12.313 に答える