Html 如何以图像为中心将两个窗体相邻放置

我正在用正确的方式使用html和css定位两个表单。我尝试了float和display:inline块，但仅使用其中一种方法使其工作了一半

我的目标是让两个表单彼此相邻地显示在一个DIV中，该DIV仅占页面的70%，每个表单占用50%的可用空间。两个表单都需要有最小宽度，如果没有足够的空间将两个表单相邻显示，则应将两个表单推到单独的行中（例如，在纵向模式下在手机上显示页面时）

如果我浮动包含表单的两个DIV，它们将并排显示，但没有正确居中（因为它们向左或向右浮动，我需要将每个DIV的大小设置为40%，或者它们不适合彼此相邻）。 如果使用display:inline block，则div的大小正确，居中，但位于两条单独的线中，且不相邻

下面是使用display:inline块的当前代码

#背景{
背景图片：url（pic.jpg）；
高度：400px；
背景尺寸：封面；
背景重复：无重复；
位置：相对位置；
背景位置：中心；
}
#表单包装器{
宽度：70%；
保证金：0自动；
文本对齐：居中；
}
#表格1{
宽度：50%；
显示：内联块；
}
#表格2{
宽度：50%；
显示：内联块；
}

这里有一些表单代码
这里有一些表单代码

您可能无法使两个

内联块

元素相邻，因为50%乘以2加上元素之间的空白大于容器的100%。因此，第二个元素没有足够的空间并换行到下一行

内联块

元素将尊重HTML代码中的空白。两个元素之间的空白如下所示：

#背景{
背景图片：url（pic.jpg）；
高度：400px；
背景尺寸：封面；
背景重复：无重复；
位置：相对位置；
背景位置：中心；
}
#表单包装器{
宽度：70%；
保证金：0自动；
文本对齐：居中；
}
#表格1{
宽度：40%；
显示：内联块；
背景色：#CCC；
}
#表格2{
宽度：40%；
显示：内联块；
背景色：#CCC；
}

这里有一些表单代码
这里有一些表单代码

在包装器中使用

显示：flex

：

#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  display:flex;
}

---

非常感谢您的意见！在看了两天这个问题之后，我基本上对任何东西都提出了质疑，但您的示例表明，我最初使用display:inline块的css的想法非常有效

这个例子正是我想要的

在进一步挖掘之后，我意识到我的一个表单不起作用，甚至在第二次复制工作表单也没有改变行为。再深入挖掘，我发现了一个问题：DIV声明中的输入错误

---

再次感谢并祝您晚上愉快。

仅供参考：您没有逃过您的“表单包装器”ID:

关闭ID:-），我在尝试简化stackoverflow代码时犯了一个拼写错误，它在站点上是关闭的，不会导致问题删除所有空白和/或将表单宽度设置为小于50%也没有影响，表单保留在单独的行中。您所考虑的解决方案在窗口宽度较小时不能正常工作，即两个表单不能填充两行@chipotle我的演示在同一行上显示了这两个元素。可能您的实际上下文与您发布的代码不同。如果是这样的话，请编辑你的问题，包括相关的代码，并说明你的问题。对我来说似乎很好，这正是我的建议@佩瓦拉：它不能按预期工作，请尝试缩小输出窗口。