firefox中奇怪的浮动行为

时间:2012-06-14 21:27:59

标签: html css

首先,可能有一个像这样的问题,但我找不到一个人的生活,所以如果有的话就不要去找我。请指导我。

css float在firefox中表现得很奇怪但没有其他浏览器。我需要将新闻Feed中的图像向左浮动,以使其旁边的文本位于图像的顶部而不是底部。当图像在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编写的,所以有点奇怪。

2 个答案:

答案 0 :(得分:1)

你可以简化HTML和CSS,这将使你的生活更轻松,我为你创造了一个小提琴,并在这里这样做:http://jsfiddle.net/P93Ta/1/

答案 1 :(得分:1)

如果我理解你的要求,hr {clear:both;}应该解决你的问题。这将导致<hr>始终到达整个页面,位于浮动图像下方,这会将其他所有内容向下推,这样图像就不会相互浮动(但文本仍会显示在下一个到相应图像的顶部)。

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

hr {clear:left;}实际上足以解决所描述的具体问题,但<hr>似乎适合双向清除。