0

次の html マークアップがあります。

            <div id="com_loaded">
                <div id="com_loaded_userpic"><a href="#" class="tooltip"><img src="pic.jpg" class="img_poster" /><span>Username</span></a></div>
                <div id="com_loaded_content">
                    <div id="com_loaded_poster">Username</a></div>
                    <div id="com_loaded_text">Comment text</div>
                </div> 
            </div>

および次の css マークアップ:

 #com_loaded {
position: relative;
width: 250px;
padding: 0px;
clear: both;
background-color:#3FC;
 }

 #com_loaded_userpic {
position: relative;
width: 55px;
height: 60px;
float: left;
padding-left: 5px;
 }

 #com_loaded_content {
position: relative;
width: 185px;
float: left;
padding-left: 5px;
 }

 #com_loaded_poster {
position: relative;
width: 185px;
float: left;
clear: left;    
 }

 #com_loaded_text {
position: relative;
width: 185px;
float: left;
clear: left;
padding-bottom: 10px;
 }

コンテナ com_loaded には背景色があります。しかし、この背景色は表示されません。コンテナに高さを与えると表示されます。しかし、comment_text には特定の高さがないため (コメントの長さによって異なります)、高さを設定したくありません。

コンテナー内のすべての div のコンテナーの背景色を表示するにはどうすればよいですか? 何がいけないのかわからない……。

4

1 に答える 1

3

フローティング コンテンツはコンテナーのレイアウトに影響を与えないため、フローティング div にラップされたアイテムは、明示的に設定しない限り (または高さを与える他の要素がない限り)、高さを持ちません。これを修正する<div style="clear:both;"></div>には、#com-loaded の末尾に a を追加します。

于 2012-09-16T08:08:47.233 に答える