html - 无法让 div 显示内联

Question

有关我的问题的示例，请参阅此笔 http://codepen.io/MarkRBM/pen/EmlJC

我现在无法获取显示预订、订阅、联系的 3 个 div，以与带有标题和段落的 div 内联显示。我已经尝试了一段时间并查看了 learn layout.com。这是一个更大元素的一部分，我试图 float 它，但如果我这样做，它会弄乱其他所有内容的样式，所以我认为必须有一种内联 block 的方法

编辑我已经用完整的 scss 文件更新了笔，有问题的 css 在第 866-894 行。可能有太多错误让您无法弄清楚，如果这不是问题，我会继续努力。

Answer 1

是的，这当然是可能的，而且您走在正确的轨道上。 CSS 中只有一些错误:

首先，.locinfo是inline-block，但是在.loc里面，不是(所以是block 默认情况下)——因此也将 .loc 设置为 inline-block。

在 .locbook 的定义中，inline-block 之后还缺少一个分号，这导致该规则被忽略。

在不知道您希望结果是什么样子的情况下，我不确定是否还有更多需要修复的地方。但这些变化似乎至少实现了大部分。

---

编辑:回复评论的更多细节:

.locinfo 在其容器中是单独存在的，因此将其宽度设置为 100% 而不是 49%。关键是这是元素的宽度占其容器的百分比。它的容器(.loc)占页面的 49%，因此如果您给 .locinfo 49%，它只会占页面的 24%。

同样，将.locbook设置为32%。这三个 div 将并排放置在其容器的 49% 页面中。

最后，在.loc上设置vertical-align: top，在.locbook上设置margin: 0，你会把所有东西都很好地对齐到顶部。