0

正しく表示されないダイアログ ボックスがありますが、その理由がわかりません。ダイアログは、いくつかの div で構成されています。

ダイアログは、タイトル、本文、およびフッターの 3 つのサブ div を含む親 div で構成されます。各サブ div は、さらに左、中央、右の 3 つのサブ サブ div に分割されます。私が理解できないのは、左フッターのサブサブ div が右側のボディサブサブ div の右側に表示される理由です。

構造が明確になるように、以下の html を単純化しました。

<div class="dialog">
  <div class="titlebar">
    <div class="titlebarleft">
    </div>
    <div class="titlebarcenter">
    </div>
    <div class="titlebarright">
    </div>
  </div>
  <div class="con">
    <div class="conleft">
    </div>
    <div class="concenter">
    </div>
    <div class="conright">
    </div>
  </div>
  <div class="footer">
    <div class="footerleft">
    </div>
    <div class="footercenter">
    </div>
    <div class="footerright">
    </div>
  </div>
</div>

CSS のほとんどは、3 つの主要なセクション (タイトルバー、本文、フッター) のそれぞれと同じです。

題名：

.titlebar {
    height: 38px;
    width: 100%;
}

コンテンツ：

.con {
    background: url("../images/dialog/vertical.png") repeat-y scroll 0 0 #FFFFFF;
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    width: 100%;
}

フッター:

.footer {
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    height: 37px;
    width: 100%;
}

左フッターの CSS は次のとおりです。

.footerleft {
    background: url("../images/dialog/static.png") no-repeat scroll 0 -83px transparent;
    float: left;
    height: 100%;
    width: 9px;
}

ここに問題の写真があります: http://s9.postimage.org/ebj6w7ynj/Dialog_Corner.jpg

4

1 に答える 1

2

すべての div 要素は display:inline です。そのため、div 要素の後に div を記述すると、親要素の幅によって div が新しい行に分割されます (2 つの div 幅が親の幅よりも大きい場合)。clear:both (floats) を .footer クラスに設定して、この要素の前で改行できるようになりました。 

.footer {
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    height: 37px;
    width: 100%;
    clear:both;
}

しかし、それがすべてのブラウザで機能するかどうかはわかりません。

于 2013-01-11T21:06:20.207 に答える