Javascript 相对于图像定位窗体的最佳方法

我正在使用HTML5，希望在页面左侧放置一个图像，在图像右侧放置一个表单。这将是相对定位，因为图像可以是任何大小。CSS是实现这一点的最佳方法，还是仅仅使用HTML就有更好的方法

我尝试了以下方法

<div class='container'>
    <div class='left'>
        <form action="javascript:ShowLoadedImage(document.getElementById('image-field').value);">
          <input type="file" accept="image/*" id="image-field" name="image" onchange="this.form.submit()">
        </form>
    </div>
    <div class='right'>
        <form>
            First name: <input type="text" name="firstname"><br>
            Last name: <input type="text" name="lastname">           
        </form>
    </div>
    <div class='clear'></div>
</div>

名字：

姓氏：

---

但是得到了表格下面的图像。事实上，我从块外的后续代码中得到了一个按钮，在它们之间。

我将使用基本HTML/CSS：

HTML:

<div class='container'>
    <div class='left'>
        <form>
            <!-- your form -->
        </form>
    </div>
    <div class='right'>
        <!-- your image -->
    </div>
    <div class='clear'></div>
</div>

.container {
    width: 300px;
}
.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}

在这里拉小提琴：

---

（我提供了多种图像大小，以便您可以查看元素的流动情况）。

另一种方法是使用一个表，将这两种图像都放在表行中，但列不同。或者，可以使用JavaScript，但某些浏览器禁用了JavaScript。表格应该用于表格数据，而不是布局。我编辑了我的初始问题以显示我的尝试。不幸的是，它没有正确地定位元素。它把图像放在表格下面。谢谢，彼得。@Otagoharb请确保

左

和

右

div适合容器。例如，如果容器的宽度为900像素，则可以尝试将它们分别设置为400px:

.left、.right{width:400px；}