首先,可能已经有这样的问题,但我一生都找不到,所以如果有的话,请不要攻击我。请直接告诉我。
css float 在 firefox 中表现异常,但在其他浏览器中没有。我需要新闻提要中的图像向左浮动,以便它旁边的文本位于图像的顶部而不是底部。当图像在 Firefox 中 float 时,内部气泡不会清除图像,而外部气泡不会清除任何图像。
这是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 编写的,所以有点奇怪。
最佳答案
如果我明白你在问什么,hr {clear:both;}
应该解决你的问题。这将导致 <hr>
始终跨过页面,到达 float 图像下方,这会将其他所有内容向下推,以便图像最终不会彼此相邻 float (但文本仍显示在相应图像顶部的旁边)。
jsFiddle:http://jsfiddle.net/ZWvCX/1/
hr {clear:left;}
实际上足以解决所描述的特定问题,但它似乎适合 <hr>
清除两个方向。
关于html - Firefox 中奇怪的 float 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11041611/