html - 行内 block ，不排队

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 时，我看到已应用内联 block 属性，并且控制台中没有错误。我已经尝试删除容器规则，删除容器 div，因此不会嵌套其他 div。我试过使用较小的图像，将属性与 float: left 组合，并将 inline-block 与 class>direct descendant 作为选择器应用。我还单独尝试了每个 div，并应用 vertical-align: top 属性以防基线干扰它，并在不同的浏览器中打开它。

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

Answer 1

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

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