5

私はjavascript（ライブラリなし）を使用してwysiwygページを開発していますが、かなり特殊なアプリケーションがあるため、オフザペグではなくカスタムビルドする必要があります。

驚くべきことに、私は長い道のりを歩んできました、そしてそれはほとんど完全です、しかし私はディスプレイを正しくするのにいくらかの困難を抱えています。

テキストと画像を含むdivがあり、画像が右に浮いているので、テキストがそれらの周りを流れます。

一部の場所では画像を中央に配置する必要があるため、画像を含めるためにdivを挿入しました。

以下のコードはこれを示しており、うまく機能します。

中央に配置された画像を含む複数のdivがある場合、それらの中央に配置されたdivのIDが同じであるため、問題が発生します。

中央揃えのdivをクラスに変更すると、画像は中央揃えになりませんが、親divの正しいフロートを想定します。

これを克服する方法はありますか？

同じIDを持つ複数のdivがある実際の問題はありますか？

FF以外のブラウザのサポートについては心配していません。

読んでくれてありがとう、どんなアドバイスでも大歓迎です。

薄暗いティム：o）

#details {
    width: 698px;
    background-color: #FFC;
}

#details img {
    float: right;
}   

.centreimage img {
    float: none;
}

.centreimage {
    float: none;
    text-align: center;
}




<div id="details">
  <p>Some text here</p>  
<img src="10750bath.jpg" height="166" width="250"> 
 <p>Which flows around the image on the right</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>

<p>The next image should be centred</p>

<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>

<p>more text</p>
<p>more text</p>
</div>

よろしくお願いします。

CSSとHTMLをクラスに変更しても、画像を中央に配置できませんでした。

答えはペッカからの手がかりにあり、特異性が原因でした。

特異性ルールは、IDにクラスよりも高い優先順位を与えます。

「details」divにはIDがありましたが、「centreimage」はクラスでした。

「詳細」のCSSをクラス（そしてもちろんマークアップ）に変更したところ、機能するようになりました。

私がそれを整理するために少なくとも10時間を費やしたとは信じられないので、みんなの助けに感謝します。

（これで、私が「薄暗いティム」である理由がわかりました）：o）

4

3 に答える 3

8

はい、同じIDを持つ複数のdivを持つことは無効です。

クラスの使用は正常に機能するはずです。

div.details {
    width: 698px;
    background-color: #FFC;
}

これらのルールが実際にオーバーライドされる場合は、より高い特異性を持つ別のルールが設定されている可能 性があります。その場合、HTMLをもっと表示する必要があります。

于 2012-08-08T07:58:19.190 に答える
1

同じIDを持つ要素を複数持つべきではありません。これは無効であり、未定義の結果になります。

div idをクラスに変更する場合は、IDではなくクラスをターゲットにするようにCSSを適切に変更する必要があります。CSSクラスの目的はまさにそれです-複数の関連する要素をターゲットにし、同じスタイルを適用します。

要素を正しくターゲットにしている限り、結果に違いはありません。

于 2012-08-08T07:58:02.257 に答える
0

ご存知のとおり、すべてのIDは一意である必要があります。あなたの例では、出力は小さなエラーのようです。class属性を画像ではなくdivに設定してみてください。ドームの正当な理由がない場合は、クラス属性を毎回改善する必要があります。

これで、画像の子にtext-alignが設定されました。たとえば、画像を読み込めなかった場合は、これがalt値になります。

于 2012-08-08T08:00:14.227 に答える