我正在使用 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>
但得到了表格下方的图片。事实上,我在它们之间从 block 外的后续代码中得到了一个按钮。
最佳答案
我会选择基本的 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;
}
在这里 fiddle :http://jsfiddle.net/SUEHs/
(我提供了多种图像尺寸,因此您可以看到元素是如何流动的)。
关于javascript - 相对于图像定位表单的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16108624/