将表单浮动到图像 - 侧边栏上

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>标签在那里做什么？