4

これは簡単な解決策のようですが、私には理解できないようです。

すべてのページの同じ場所に画像を配置する必要があります。また、画像の上部と下部の両方を囲むテキストが必要です。

http://jsfiddle.net/4AnsK/

右上の画像のスペースに注目してください。画像とともにシフトダウンしません。なぜこれが起こるのかは理解できますが、それを機能させる方法がわかりません。

相対位置を使用して「トップ」値を設定してみました。マージントップ、パディングトップ、絶対divコンテナに入れるなどを試しましたが、理解できないようです。どんな助けでも大歓迎です。

4

2 に答える 2

8

これは機能しているように見えますが、HTMLハックが少し必要です。基本的には、画像の上にゼロ幅のスペーサーを配置するだけで、他に影響を与えることなく画像を押し下げることができます。

これをHTMLの画像の前に追加します。

<span id="evilNonSemanticSpacer"></span>

そして、このCSSを使用します。

#evilNonSemanticSpacer {
    float:right;
    display:block;
    height:210px;
}
img
{
    float: right;
    clear:right;
}​

画像から相対的な位置を削除すると、テキストが適切な場所に配置されます。フィドルの例はここにあります。

Chromeのテキストの折り返しには奇妙な点があります（上の行が画像の上にあります）。ただし、Firefoxには表示されません。Chromeで修正できる唯一の方法は、を使用することですが、Firefox（および場合によっては他のブラウザ）の画像のmargin-top: 1.1em上imgに空白が表示されます。

于 2012-05-21T19:07:20.083 に答える
0

top: 200px別の方法として、2番目または3番目の段落の後にimgを配置し、 ？を削除することもできます。これは同様の効果を生み出しますが、正確に200pxになることを保証することはできません。そうでなければ、運が悪かったので、段落は元の位置の周りに浮かんでしまいます。

于 2012-05-21T19:03:37.213 に答える