Question

我想创建一个水平滚动网站，全屏图像div。 div将包含文本，这就是我使用背景图像的原因。我找不到办法，把div整齐地放在一起。

我已经尝试浮动和内联阻止，但要么它不起作用，要么div没有正确对齐。

我已经制作了一个jsfiddle来显示我的代码。目标是在“B＆＃34; 旁边”A＆＃34; 。

<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 and .b。

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

以下是Updated Fiddle

Answer 2

更新圣诞节前一天：） 使用背景大小（如果图像的位置偏斜，则可以使用背景位置。）

实际上，没有任何可能的方法可以让图像覆盖整个事物，而不会在某处切断或扭曲图像的比例（创建一个糟糕的，模糊的图像）。最好的办法是让图像覆盖视口区域，并将一些边切掉，然后用background-position:x(%);将图像的主体居中。

Google Drive＆＃34; intro＆＃34;网站似乎有你追随图像的行为。仔细看看第一个＆＃34;面板＆＃34;以及应用背景图像的样式。那是你要的吗？看起来非常接近。

要尝试不同的背景尺寸行为，我建议您查看此播放页面http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=200px。

试试这个：）

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
  /*remove annoying margin created by display:inline-block;*/
  font-size: 0;
}
.a,
.b {
  width: 100%;
  height: 100%;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  background-position:center center;
}
.a {
  background-image: url(http://i66.tinypic.com/2wqv7fd.jpg);
}
.b {
  background-image: url(http://i67.tinypic.com/2lborxv.jpg);
}

＆＃13;

<body>

  <div id="wrapper">

    <div class="a">Text</div>
    <div class="b">Text</div>

  </div>

</body>

＆＃13;

Answer 3

使用没有空格的内联块依赖于HTML标记，两个元素之间没有间隙。 <div class="a">Text</div> <div class="b">Text</div>会在两个div之间产生一个空格。

要获得填充div的宽度和高度的背景图像，我们可以使用background-size: 100% 100%; background-position:center;。或者，如果我们希望背景图像裁剪而不是拉伸，我们可以使用background-size:cover;。

更新小提琴：https://jsfiddle.net/v2wxv73e/2/

 #wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
}

.a,
.b {
  width:100%;
  height:100%;
  background-size: 100% 100%;
  background-position:center;
  background-repeat: no-repeat;
  display:inline-block;
}

以前的答案：

在float:left width:50%;

时使用#wrapper和width: 200%.

小提琴：https://jsfiddle.net/v2wxv73e/

Answer 4

我解决了您的问题，请通过以下方式更改您的CSS： -

ExpandoMetaClass

它可能对你有帮助。

在水平滚动页面

4 个答案: