Html 无法获取要内联显示的div

请看这支笔，看看我的问题

我不能得到3个div，说BookNow，subscribe，contact以显示标题和段落与div的内联。我已经尝试了一段时间，并查看了learnlayout.com。这是一个更大项目的一部分，我曾尝试将其浮动，但如果我这样做，它会打乱其他所有项目的样式，因此我认为必须有一种使用内联块的方法

---

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

你可以尝试将它们切换到跨度。默认情况下，Div是{display:block}，而span是{display:inline}。块图元不能与其他图元放置在同一行上。但是，不能指定内联元素的宽度，在这种情况下，您需要设置div或span的样式，无论您选择哪种样式（这其实并不重要），以{display:Inline block}

是的，这当然是可能的，而且您的做法是正确的。css中只有几个错误：

首先，

.locinfo

是

内联块

，但它在

.loc

内部，而不是（默认情况下它是

块

），所以也将

.loc

设置为

内联块

在

.locbook

的定义中，

内联块

后面还缺少分号，这导致该规则被忽略

在不知道你想要的结果是什么样的情况下，我不确定是否还有更多的问题需要解决。但这些变化似乎至少在大部分方面都得到了实现

---

编辑：回应评论的更多详细信息：

.locinfo

在其容器中单独存在，因此将其宽度设置为100%，而不是49%。关键是这是元素的宽度占其容器的百分比。它的容器（a

.loc

）拥有49%的页面，因此如果您提供

.locinfo

49%的内容，它将只拥有24%的页面

同样，将

.locbook

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

---

最后，在

.loc

上设置

垂直对齐：top

，在

.locbook

上设置

边距：0

，您将使所有内容与顶部对齐。

您忘记在显示：inline块后添加分号

.locbook{
  /*width: 49%;*/
  background-color: #3475b3;
  display: inline-block;
  vertical-align: top;
}

---

感谢您在我的笔中完成了工作，但在我的项目中没有。我已经用完整的scss文件更新了笔。正在讨论的css在第866-894行。可能会有太多的问题让你想不出来，如果不是这样的话，我会继续努力解决。我添加了更多的细节，让所有的积木都与顶部对齐。然后我再次检查了代码笔，它包含了所有的新代码。。。但希望我的答案在本页其余部分的上下文中仍然有效。它似乎解决了更多约束示例中的所有问题。是的，谢谢，我应该创建一个新的，而不是保存它，你帮助我使它几乎可以按我想要的方式工作。声明display:inline black是在div的顶部添加空间，所以我现在必须弄清楚这一点，但是inline部分似乎正在工作。感谢

h1

s默认设置了边距，设置

margin:0

在我尝试时去掉了空格。也许你指的是别的东西。不管怎样，很高兴听到这个消息。