Html 浮动图像旁边的表

我正试图完成一些我认为很简单的事情，但似乎当涉及到CSS时，你永远不会知道

我有一个图像浮动到左边。在它旁边，我有一个标题，在这个标题下，但除了图像之外，我还想显示一个表格，占据所有剩余的宽度。在IE和Chrome中，表格位于“我的图像”下，而在Firefox中，表格占用的时间超过100%（显示一个水平滚动条）。Firefox给出的结果更接近我想要的，但我不想要滚动条

下面是我试图使用w3school“try it”编辑器（）

h1{
字号：1em；
}
img
{
浮动：左；
}
.场{
宽度：100%
}    
这是标题

我知道对于那个简单的表单来说，结构太复杂了，但是表单是由PHP脚本自动生成的，所以我希望保持这种方式。

尝试将CSS中的

设置为

显示：block

，并删除

width=“100%”

属性：

table {
    display: block;
}

---

上面的示例在表上包括一个红色边框，以便您可以看到它的位置。我还将图像更改为一只小猫，以确保它会显示出来。

因为您有一个浮动图像，从

获取水平空间。content

div是您获得扩展表的原因。

.content

div不知道浮动的图像宽度。您可以通过在

.content

div上至少放置图像宽度的边距来抵消此影响

.content 
{
    margin-left: 95px; 
}

---

contentdiv是页面宽度的100%，包括浮动图像下的位，因此设置为100%的输入也将是该宽度，以使

.content

div只占用浮动图像后剩余的空间，您可以向其添加

溢出：隐藏

，但是，

input

本身可以使用不同的盒子模型，因此我建议使用99%的宽度。如果内容实际上不是

输入

，那么可能100%适用于大多数元素；）

e、 g.x-浏览器代码

h1 {font-size:1em;}

table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}

.content {overflow: hidden;}
form {padding: 0; margin: 0;}

img {float:left;}

.field {
    width:99%;
    margin: 0 auto;
} 

---

我认为你必须将你的桌子和你的图像一起浮动，并去除宽度：100%在你的桌子上

<div id="content">
    <div id="side_bar" style="float:left;">image</div>
    <div id="main_content" style="float:left;">table</div>
    <div style="clear:left;"></div>
</div>

形象
桌子

还是老办法

<table>
    <tr>
        <td>image</td>
        <td>table</td>
    </tr>
</table>

形象
桌子

好先生，您不再需要去寻找小猫来放入您的代码中（尽管我很钦佩您的奉献精神）。我想你会欣赏placekitten.com的惊人之处。您的解决方案确实正确地显示了表格，但我也需要让文本框填充整个空间（对不起，我忘了指定）。谢谢你的意见！嗯，解决方案毕竟很简单！我确实尝试了一个边距，但我猜是在错误的元素上，或者是在错误的组合上！谢谢你的意见，但达斯汀·莱恩建议增加一个保证金就成功了！

<table>
    <tr>
        <td>image</td>
        <td>table</td>
    </tr>
</table>