html - 在水平滚动页面上对齐全屏图像 div

Question

我想制作一个水平滚动的网站，带有全屏图像 div。 div 将包含文本，这就是我使用背景图像的原因。 我找不到办法将 div 整齐地并排放置。

我试过 float 和 inline-block，但要么不起作用，要么 div 没有正确对齐。

我制作了一个 jsfiddle 来展示我的代码。目标是让“A”紧挨着“B”。

Here's the fiddle link

<div class="a">Text</div>
<div class="b">Text</div>

谢谢!

更新 – 图片高度必须为 100%。网站上会用到两个以上的div，而且它们的宽度都不一样。 Here's a sketch of what I try to achieve

Answer 1

将 display:inline-block 放入您的类 .a 和 .b。

.a,
.b {
  width: 100%;
  height: 100%;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  display:inline-block;
}

这是 Updated Fiddle