html - 将表单 float 到图像上 - 侧边栏

Question

我需要将此表单放置在我的博文页面边栏中图像的顶部:

http://insightcxo.com/category/blog/

现在图像和表单位于同一个容器中，但位于彼此下方。

Answer 1

您的标记中有几个问题。这是我在提供的链接中看到的:

<td align="center" valign="top">
  <a href="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png">
    <img class="aligncenter size-full wp-image-1035" src="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png" alt="blog form background" width="370" height="400">
  </a>
  <p></p>
  <table class="bodyContainer webFormBodyContainer" width="100%" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF">
        <!-- form is in here -->
  </table>
</td>

首先，您有一个 <a>带有 <img> 的标签在其中，高度为 400px。所以这就是插入你的 <table> (其中包括您的 <form> )。

您要做的只是将该图像作为背景图像，而不是 <a> 的背景标签。这样，您就可以嵌套 <form>在带有背景图像的容器内。

大致是这样的:

<div style="background: url('http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png');">
  <form></form>
</div>

虽然还有一些额外的提示:

1. 不要使用 <table>用于布局目的的标签。仅将它们用于实际数据表。
2. 避免内联样式(我在上面这样做只是为了向您展示背景图像样式应该放在哪里。相反，设置一个类，例如 .form-container，然后在单独的 CSS 文件中应用您的样式。
3. 避免使用额外的标记。那是什么空<p>标签在那里做什么？