0

请参阅这支笔以了解我的问题http://codepen.io/MarkRBM/pen/EmlJC

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

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

4

3 回答 3

1

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

首先，.locinfois inline-block，但它在 inside .loc，它不是（block默认情况下）——所以也设置.loc为inline-block。

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

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

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

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

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

最后，设置vertical-align: topon.loc和margin: 0on .locbook，你会得到一切都很好地对齐到顶部。

于 2013-07-17T18:58:32.020 回答
1

您忘记在 display:inline-block 后添加分号

.locbook{
  /*width: 49%;*/
  background-color: #3475b3;
  display: inline-block;
  vertical-align: top;
}
于 2013-07-17T19:00:54.327 回答
0

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

于 2013-07-17T18:53:25.023 回答