居中divs - 对齐中心并且并排设置

Question

我正在着陆页上工作，这就是目前的情况：https://a00baa69ca400642fad5c0cead23ef741b6473f7.googledrive.com/host/0B9XEA2QvXeaQZmdGcW1kVk9Kajg/main.html

以下是线框：http://static.squarespace.com/static/52228ba5e4b02da2a90a906c/t/529bc6f9e4b09eb80192c1ae/1385940737162/Good%20Collab.jpg?format=1000w

对于着陆页，通过将最大宽度和边距设置为自动，无论观看者的显示器尺寸如何，我都可以对齐三张照片。

**以下是用于三张照片的CSS：**

.three-containers {
max-width: 1080px;
margin: auto;
display: block; }

但是，我无法将三张照片下方的部分设置为并排显示（即“工作原理”部分和表格）。我尝试将相似的代码应用于三张照片 - 我为每个照片设置了一个div（一个div用于How it Works和另一个用于表单）

div class =＆＃34; two-text＆＃34;对于它如何工作的部分和另一个div类=＆＃34;双文本＆＃34;对于FORM PART 和 CSS：

.two-texts {

max-width: 900px;
margin: auto;
display: block; 
clear:left;
}

问题是现在，当我真正想要它与How it Works部分并排时，表格在How it Works部分下对齐（参见顶部的线框链接）。 任何人都可以指出问题可能是什么？感谢。

Answer 1

欢迎使用StackOverflow！

在HTML中，某些元素默认为水平堆叠，而某些元素垂直堆叠。 div设计为默认垂直堆叠，因为它们的display属性默认为block。尝试使用以下CSS样式来查看带有图像的三个div会发生什么：

.three-containers > div {
    display: inline-block;
    max-width: 300px;
}

（由于div包含的图像，最大宽度在那里）

同样，要水平制作两个divs堆栈，请尝试以下CSS：

#bodytext, .form {
    display: inline-block;
}

让我知道这是否有助于您走上正确的道路！