内联块，不排队

Question

我无法让我的 div 水平排列。

这是我的 html 文档：https://gist.github.com/Keenangp/9def2bd08eb6244bcf2d 我也没有足够的代表来发布样式表，但它可以：

.container {
     width: 80%;
     margin: auto;
   }
.column {
     display:inline-block
   }
.image {
     display:inline-block
   }

这是页面：keenansportfolio.bitballoon.com/about

我在此处查看以前的解决方案时尝试过的一些事情：

当我在 Chrome 开发工具中检查 div 时，我看到内联块属性已被应用，并且控制台中没有错误。我试过删除容器规则，删除容器 div，所以其他 div 没有嵌套。我尝试使用较小的图像，将属性与 float:left 结合起来，并将 inline-block 与类>直接后代作为选择器应用。我还尝试了每个 div 本身，并应用 vertical-align: top 属性以防基线干扰它，并在不同的浏览器中打开它。

这是一个练习，我没有被告知要编辑任何其他值或添加任何其他属性。我有点难过。

Answer 1

如果我做对了，你想将三列对齐。

您必须设置每列的宽度，并且它们的总和不应超过容器的宽度。为所有三列设置宽度（例如：32%），如果您想对齐它们，即使它们的宽度总和超过容器的宽度，请将此属性添加到容器；空白：nowrap。

Answer 2

您必须为“图像”、“列”类设置“div 宽度”。例如，

.image, .column 
  {
   display: inline-block;
   width: 30%;
  }