21

我正在尝试使用overflow-x: scroll & white-space: nowrap创建一个带有（平铺）背景图像的水平滚动窗格。窗格跨越任意数量的元素。

CSS：

.frame {
   overflow-x: scroll;
}

.pane {
   background-image: url(free-tile-floor-texture.jpg);
   background-repeat: repeat;
   white-space: nowrap;
}

.item {
   display: inline-block;
   width: 150px;
   height: 50px;
   background-color: grey;
}

HTML：

<div class="frame">
   <div class="pane">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

小提琴演示

我希望背景图块自动跨越窗格的整个宽度，包括其所有项目元素。目前它只填充到框架宽度。罪魁祸首似乎是窗格宽度属性 - 它不适应窗格内容的整体宽度。

Ofc，它通过手动调整宽度属性来工作，但我需要它来动态调整。

如何让窗格的背景图像填满窗格的整个宽度？有没有其他方法可以达到同样的效果？

4

3 回答 3

15

将此行添加到.pane

display: inline-block;
于 2014-03-08T14:32:33.897 回答
8

简短的回答：

block元素，比如<div>默认采用父元素的宽度（如果没有width设置），并且不会进一步扩展（即使子内容溢出）。inline元素的情况并非如此，例如<span>，它将取而代之的是子内容的宽度。

因此，通过使用，inline-block您将受益于子内容的宽度和高度，并拥有您想要的。

（存在其他解决方案，例如：float: left;、、position: absolute;...）

更多解释：

我遇到了同样的问题，我想创建一个旋转木马（或 OP 要求的带有平铺的水平滚动窗格），最后有填充，所以最后一个项目不会折叠到视口的边缘。

因此，基本上，您将拥有可滚动的 carrousel 元素（the frame），然后是带有填充物（the ）的瓷砖容器，pane最后是瓷砖（the items）：

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  padding: 20px;
  white-space: nowrap
}

.item {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}
<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

如您所见，填充在开始时起作用，但在结束时不起作用，因为pane' 的宽度不会超出父宽度（frame在本例中为 ' 宽度）。

添加修复问题display: inline-block;：pane

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  display: inline-block;
  padding: 20px;
  white-space: nowrap
}

.item {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}
<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

现代解决方案（没有white-space: nowrap;）：

与 OP 关于white-space: nowrap;规则的问题有点不同，如果您正在寻找更现代的解决方案来创建轮播，您可以使用flex规则来实现这一点，因为 flex 容器中的项目默认情况下不会包装，而且它也会使 CSS 更简洁：

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  display: inline-flex;
  padding: 20px;
}

.item {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}
<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

于 2020-04-24T17:57:40.280 回答
0

您可以在框架中定义背景图像，这是您的整个面板

http://jsfiddle.net/erenyener/9u29k/6/

 .frame {
     overflow-x: scroll;
     background-image: url(http://store.got3d.com/products/30-tile-floor-textures/thumbnails/free-tile-floor-texture.jpg);
     background-repeat: repeat;
}
于 2014-03-07T21:06:05.760 回答