Question

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

我现在无法获得说书的3个div，订阅，联系以与标题和段落一起显示内联。我一直试着看着学习layout.com。这是一个更大的项目的一部分，我试图浮动它，但它弄乱了其他一切的样式，如果我这样做，所以我认为必须有内联块的方式

编辑我已经使用完整的scss文件更新了笔，有问题的CSS位于第866-894行。可能有太多的错误让你弄清楚，如果这样不是问题，我会继续插手。

Answer 1

是的，这当然是可能的，而且你走在正确的轨道上。只是css中的一些错误：

首先，.locinfo是inline-block，但它在.loc内，而不是（默认为block） - 所以将.loc设置为{ {1}}也是。

在inline-block的定义inline-block之后，您还错过了分号，这导致该规则被忽略。

如果不确切知道你想要的结果是什么样的，我不确定是否还需要修复。但这些变化似乎至少在那里得到了很多。

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

.locbook单独在其容器中，因此将其宽度设置为100％而不是49％。关键是这是元素的宽度占其容器的百分比。它的容器（.locinfo）有49％的页面，所以如果你给它.loc 49％，它只占页面的24％。

同样，将.locinfo设置为32％。然后这三个div将并排放在容器的49％的页面中。

最后，在.locbook上设置vertical-align: top，在.loc设置margin: 0，然后您就可以很好地与顶部对齐。

Answer 2

你忘记在显示后添加分号：inline-block

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

Answer 3

您可以尝试将它们切换到跨度。 Div是默认的{display：block}，而spans是{display：inline}。块元素不能与其他元素放在同一行。但是，无法指定内联元素的宽度，在这种情况下，您需要设置div或span的样式，无论您选择哪个（它都没关系）{display：inline-block}

不能让div显示为内联

3 个答案: