html - Firefox 不会用图像包裹 div

Question

我必须将给定的网页设计转换为 CMS 的模板。当我这样做时，我意识到 Firefox 中的设计确实搞砸了:

我对网页设计不是很深入，但我能够将其缩小到一个 div (.inside)，其中包含另外两个 div(.titel 和 .logo)和一个 <figure>包含 <img> .

在 Chrome(版本 33)和 IE(版本 10)中，图像呈现在两个 div 下(正如设计者的意图)——在 Firefox 中，图像与其他两个元素对齐插入。

看区别: https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png

我准备了一个jsfiddle: http://jsfiddle.net/5zu32/embedded/result/

粗略的代码:

<div class="inside">
    <div class="titel"></div>
    <div class="logo"></div>
    <div class="main_image block">
        <figure class="image_container">
            <img src="foo" alt="img test" height="323" width="853">
       </figure>
    </div> 
</div>

我试图删除“block”类(它只删除了溢出:隐藏)但是这搞砸了原来的设计。 (它在演示中并没有那么清楚地做到这一点。)

(马的图片是随机的互联网图片，恰好与我使用的图片大小相同)

我希望有人能帮助我吗？我该如何解决这个问题？

顺便说一句:我是这个网站的新手，如果我做错了什么，请告诉我:)

Answer 1

尝试使用

.main_image {
     clear: both;
     ...
}

这将清除您之前使用的 float: left。