0

まず第一に、おそらくすでにこのような質問がありますが、私は私の人生のためにそれを見つけることができなかったので、もしあれば私に行くことはありません。教えてください。

css floatは、Firefoxでは奇妙な動作をしていますが、他のブラウザでは動作していません。ニュースフィードの画像を左にフロートさせて、その横のテキストが画像の下部ではなく上部に表示されるようにする必要があります。画像がFirefoxに浮かんでいる場合、内側のバブルは画像をクリアせず、外側のバブルは画像をクリアしません。

これがcssです：

#news {width:99.2%; background-color:#E9F7FE; border-radius:0.2em; padding:5px; position:relative; margin-bottom:10px}
.picture {width:70px;overflow:hidden; margin-right:5px; border-radius:0.2em; display:inline-block; float:left;}
.bubble {float:left; padding:5px;border-radius:0.2em; background-color:#E9F7FE; margin-bottom:5px; margin-right:10px; width:33.3%; margin-bottom:10px; }
.innerbubble {position:relative; background-color:white; border-radius:0.2em; padding:5px;}
#probwarn {border-radius:0.2em; background-color:#E9F7FE; text-align:center; margin-top:5px; width:100%; margin-bottom:5px; float:right;}

そしてマークアップ： 

<h1>Latest News:</h1>

<div class="innerbubble">

<a href="index.html"><div class="picture"><img src=" 
 http://newbornsounds.co.uk/artistspictures/Not%20by%20design/Andy%20Evans%20logo%205.jpg" width="100%"  alt="NewBorn Sounds" >

</div>

News: Not By Design<br></a>

<hr>

<div class="picture"><img src=" 
  ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg" width="100%"  alt="NewBorn Sounds" >

</div>

<a href="JacobWindsor">New Artist: Jacob Windsor<br></a><hr><a href="JacobWindsor/gigs">

<div class="picture"><img src="     ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg"     width="100%"  alt="NewBorn Sounds" >

</div>

New Gig: a from Jacob Windsor</a><br><hr></div></div>

マークアップが少し読みづらく、フォーマットが適切でないことをお詫び申し上げます。PHPで書かれているので、少し奇妙になっています。

4

2 に答える 2

1

あなたはあなたの人生を楽にするHTMLとCSSを単純化することができます、私はあなたのためにフィドルを作成しました、そしてここでそうしました：http: //jsfiddle.net/P93Ta/1/

于 2012-06-14T22:47:31.293 に答える
1

私があなたが何を求めているかを理解しているなら、hr {clear:both;}あなたの問題を解決するべきです。これにより、<hr>は常にページ全体に到達し、フロートされた画像の下に移動します。これにより、他のすべてが押し下げられ、画像が隣り合ってフローティングにならないようになります（ただし、テキストは引き続きページの上部の横に表示されます。対応する画像）。

jsFiddle： http: //jsfiddle.net/ZWvCX/1/

hr {clear:left;}<hr>説明されている特定の問題を修正するには実際には十分ですが、両方向でクリアするのが適切であるように思われます。

于 2012-06-14T22:51:56.377 に答える