Question

我收到了一个设计来实现一个带有表单的页面，其中表单顶部的底部必须与背景中的图像对齐，如下所示：

如你所见，有一个＆＃34;表格部分＆＃34;在＆＃34;形成顶部＆＃34;之后。＆＃34;底部＆＃34;形成顶部＆＃34; ＆＃34;表格部分的顶部＆＃34;与背景图像的底部对齐。 John Doe还引用了背景图像的引用，该图像保留在右侧并包含在其中。还有另一部分＆＃34;标题＆＃34;以及保持在右侧但在背景图像下方的链接。

我没有收到移动设计，所以对于小屏幕，我只是在报价上设置display: none并按下＆＃34;标题＆＃34;和表格下面的链接。

我的问题是，实现这一目标的最佳标记和CSS是什么？

我尝试过的事情：

我首先尝试将页面分为两个部分，顶部和底部，然后以负边距向上推动表单。标记（非常非常简化的版本）看起来像：
```
<div class="top">
  <div class="quote">A quote</div>
</div>  

<div class="bottom">
  <form>form inputs here</form>
  <div class="links-section"><a>A link</a><a>Another link</a></div>
</div>
```
样式看起来像：
```
.top { position: relative; background-image: url(blah); }
.quote { position: absolute; bottom: 0; right: 0; etc. }    

form { display: inline-block; width: 50%; position: relative; top: some negative unit; }
.links-section { display: inline-block; width: 50%; }
```
同样，一个只有相关代码的非常简化的版本。＆＃34;一些负面单位＆＃34;我正在调整以调整表格和背景图像。

通过这种方法，即保持表格受限于浅绿色区域，我真的很难在浏览器和图像底部的不同屏幕尺寸上保持对齐。通过＆＃34;事物＆＃34;我的意思是＆＃34;形成顶部的底部＆＃34; ＆＃34;表单部分＆＃34;的顶部，应该与背景图像的底部对齐。我想这就像试图创造一个像素完美的设计，我认为这很难，如果不是不可能的话。

所以我尝试了不同的方法，但我觉得它有点讨厌。方法是使表单与页面大小相同，并定义表单的顶部和底部INSIDE。标记的一个非常简化的版本如下所示：

<form>
  <div class="top">
    <div class="form-top">form fields that go in the top</div>
    <div class="quote">A quote</div>
  </div>    

  <div class="bottom">
    <div class="form-bottom">
      form fields that go in the bottom
      includes "form section" and "form bottom" in the image attached
    </div>
    <div class="links-section"><a>A link</a><a>Another link</a></div>
  </div>
</form>

风格：

.top { background-image: url(blah); }
.form-top { display: inline-block; width: 50%; }
.quote    { display: inline-block; width: 50%; }   

.form-bottom   { display: inline-block; width: 50%; }
.links-section { display: inline-block; width: 50%; }

另一种方法，我也觉得讨厌，就是在方法2中有一个标记，但表单字段没有被form标记包围，然后有表单标签只围绕提交按钮并祈祷人们点击提交按钮时找到并发送字段。例如：

  <div class="top">
    <div class="form-top">form fields that go in the top</div>
    <div class="quote">A quote</div>
  </div>    

  <div class="bottom">
    <div class="form-bottom">
      form fields that go in the bottom
      includes "form section" and "form bottom" in the image attached

      <form>
        <button type="submit">Submit</button>
      </form>

    </div>
    <div class="links-section"><a>A link</a><a>Another link</a></div>
  </div>

它没有帮助，提交表单时，感谢信息出现在由＆＃34;表格顶部＆＃34;定义的浅绿色区域中。 +＆＃34;表格部分＆＃34; +＆＃34;表格底部＆＃34; 。

这里有没有人有更好的想法以非讨厌的方式标记和设计，这适用于主流浏览器和不同的屏幕尺寸？目前我正在使用方法2，但我不为此解决方案感到自豪。

顶部必须与背景中的图像对齐的表格

我尝试过的事情：

0 个答案: