clearを使用している場合は、空白文字を使用してください。

Question

Joomla 1.7のWebサイトを構築していますが、ギャラリープラグインを使用しています。 1つの問題を除いて、これは本当に素晴らしいことです。ギャラリープラグインでは、すべての画像の上に表示される説明を挿入できますが、これを使うたびに膨大な空白があります。

http://imgur.com/FGrGi

HTML：

<div id="phocagallery" class="pg-category-view" style="width:800px;margin: auto;"> 
    <div class="pg-category-view-desc">Pictures of the Roskilde Family</div> 
    <div id="pg-icons"></div> 
    <div style="clear:both"></div> 
    <div class="phocagallery-box-file" style="height:158px; width:120px;"> 
    <div class="phocagallery-box-file" style="height:158px; width:120px;"> 
    <div class="phocagallery-box-file" style="height:158px; width:120px;"> 
    <div class="phocagallery-box-file" style="height:158px; width:120px;"> 
    <div class="phocagallery-box-file" style="height:158px; width:120px;"> 

私が削除した場合、空白が消えました。私は火かき棒で私のCSSを見ますが、なぜ私にこの空白を与えているのか理解できません。私はYahooのcss-resetを使用しました。

EDIT：CSS

のdivのid = "phocagallery" クラス= "PG-カテゴリビュー"：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td, p 
{ 
    margin: 0; 
    padding: 0; 
} 
    body { 
    color: #000000; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 75%; 
    line-height: 1.3; 
} 

誰もが手掛かりを持っていますか？

Answer 1

左側または右側に浮動要素がある（または浮動している）サイドバーが必要です。

clear：両方とも、要素がその浮動要素の下にあるようにします。

ここで問題を参照してください：http://jsfiddle.net/9Razw/

一つの解決策は#phocagalleryまたはclear:both要素の親にoverflow: hiddenを設定することです。

Answer 2

クラスPG-カテゴリビュー-DESCは、おそらくのdivフロートを与える：左またはフロート：右、それはまた、固定の高さを持っており、明確には、divの高さ

Answer 3

はそれを

.clear 
{ 
    height:0px; 
    clear:both; 
}