html - float 图像旁边的 table

我正在尝试完成一些我认为很简单的事情，但似乎当谈到 CSS 时，你永远不知道!

我有一张图片漂浮在左边。在它旁边，我有一个标题，在该标题下，但除了图像之外，我还想显示一个占据所有剩余宽度的表格。在 IE 和 Chrome 中，表格最终位于我的图像下方，而在 Firefox 中，它占用的空间超过 100%(显示水平滚动条)。 Firefox 给出的结果更接近我想要的结果，但我不想要滚动条。

这里有一些我尝试使用 w3school“试用”编辑器 (http://www.w3schools.com/css/tryit.asp?filename=trycss_float) 编写的代码

<html>
    <head>
        <style type="text/css">
            h1{
                font-size:1em;
            }
            img 
            {
                float:left;
            }
            .field{
                width:100%
            }    
        </style>
    </head>

    <body>
        <img src="logocss.gif" width="95" height="84" />
        <div class="content">
            <h1>this is the title</h1>
            <form>
                <table width="100%">
                    <tr>
                        <td><input type="text" class="field"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>    
</html>

我知道这个简单的表单的结构太复杂了，但是表单是由 PHP 脚本自动生成的，所以我想保持这种状态。

最佳答案

因为您有一个 float 图像，它占用了 .content div 的水平空间，这就是您获得扩展表的原因。 .content div 不知道 float 图像的宽度。您可以通过在 .content div 上放置至少与图像宽度相同的边距来抵消这一点。