html - 如何将两个表格彼此相邻放置在图像的中心

Question

我正在努力寻找使用 html 和 css 定位两个表单的正确方法。我已经尝试了 float 和 display:inline-block，但使用其中一种方法只成功了一半。

我的目标是让两个表单并排显示在一个仅占页面 70% 的 DIV 中心，每个表单占据 50% 的可用空间。两种形式都需要有一个最小宽度，如果没有足够的空间将两者并排显示(即在手机上以纵向模式显示页面时)，则应将其插入单独的行

如果我 float 包含表单的两个 DIV，它们并排显示但未正确居中(因为它们向左或向右浮动，我需要将每个 DIV 的大小设置为 40%，否则它们不适合彼此相邻)。如果我使用 display:inline-block，则 DIV 的大小正确且居中，但位于两个单独的行中，而不是彼此相邻。

这是当前使用 display: inline-block 的代码

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 50%;
  display: inline-block;
}
#form2 {
  width: 50%;
  display: inline-block;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div>
    <div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

为什么使用 display:inline-block 时表格在不同的行？

Answer 1

您可能无法将两个 inline-block 元素并排放置，因为 50% 乘以 2 加上元素之间的空白大于容器的 100%。因此，第二个元素没有足够的空间并换行到下一行。

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

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 40%;
  display: inline-block;
  background-color: #CCC;
}
#form2 {
  width: 40%;
  display: inline-block;
  background-color: #CCC;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div>
    <div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

因此，解决您的问题的一种方法是删除空白，如下所示。

我还为每个元素指定了一个最小宽度，以便当窗口低于指定宽度时，它们可以换行。要查看此操作，请单击右上角的“整页”按钮并调整浏览器窗口的大小。

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 50%;
  display: inline-block;
  min-width:200px;
}
#form2 {
  width: 50%;
  display: inline-block;
  min-width:200px;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div><div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>