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

Question

我正在用正确的方法拉出我的头发,用html和css定位两个表格.我已经尝试了浮动和显示:内联块但只设法使用其中一种方法使其中一半工作.

我的目标是让两个表单以DIV为中心彼此相邻,DIV只占页面的70%,每个表单占用可用空间的50%.两种形式都需要具有最小宽度,如果没有足够的空间同时显示彼此(即在纵向模式下在手机上显示页面时),则应将其推入单独的行中

如果我浮动包含表格的两个DIV,它们并排显示但没有正确居中(因为它们向左或向右浮动,我需要将每个DIV的大小设置为40%或者它们不适合每个DIV其他).如果我使用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%的两倍加上元素之间的空白区域大于容器的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>