javascript - 相对于图像定位表单的最佳方法

Question

我正在使用 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>

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

Answer 1

我会使用基本的 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>

CSS：

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

在这里小提琴：http: //jsfiddle.net/SUEHs/

（我提供了多种图像尺寸，因此您可以看到元素是如何流动的）。