Question

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

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

如果我浮动包含表格的两个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

您可能无法将两个bg.x = scrollX; bg.y = scrollY; var circleStagePt:Point = new Point(0, 0); // relative to stage var circleLocalPt:Point = bg.globalToLocal(circleStagePt); // relative to bg bg.purpleCircle.x = circleLocalPt.x; bg.purpleCircle.y = circleLocalPt.y;元素彼此相邻，因为50％的两倍加上元素之间的空白区域大于容器的100％。因此，第二个元素没有足够的空间并包裹到下一行。

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

＆＃13;

inline-block

＆＃13;

#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;
}

＆＃13;

因此，您的问题的一个解决方案是删除空格，如下所示。

我还给每个元素一个最小宽度，以便当窗口低于指定宽度时它们会换行。要查看此操作，请点击＆＃34;完整页面＆＃34;右上角的按钮，并调整浏览器窗口的大小。

＆＃13;

<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>

＆＃13;

#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;
}

＆＃13;

Answer 2

在包装器中使用display:flex：

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

JS BIN

Answer 3

非常感谢您的投入！在看了这个问题两天后，我基本上都在质疑，但是你的例子显示我使用display：inline-block对css的原始想法运作良好。

http://jsbin.com/qiraxo/2/的例子正是我所寻找的。

在挖掘了一些后，我意识到我的一个表格不起作用，甚至在第二次复制工作表格并没有改变行为。所以更多的挖掘和我发现了问题：DIV声明中的拼写错误....

再次感谢，祝你晚安。

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

3 个答案: