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相结合，并使用类＆gt;直接后代作为选择器应用inline-block。我还自己尝试了每个div，并应用了vertical-align：top属性，以防基线干扰它，并在不同的浏览器中打开它。

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

Answer 1

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

您必须设置每列的宽度，并且这些列的总和不应超过容器的宽度。设置所有三列的宽度（例如：32％），如果要对齐它们，即使它们的宽度总和超过容器，也要将此属性添加到容器中;空白：NOWRAP

Answer 2

您必须为“image”，“column”类设置“div width”。例如，

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

内联块，不排队

2 个答案: