Question

我在宽度限制的div元素（Bootstrap容器）中有一个文本。在它下面，我想要一个带有一些瓷砖的滚动视图。我希望滚动视图具有完整的页面宽度，但其内容要与上面的文本对齐。最初，它看起来像下面，一切都很好：

但是，当滚动到最后时，内容也应该与文本元素的右边缘对齐，这不会发生：

＆＃13;

  

  .container {
      max-width:400px;
      margin:auto;
    }

    .tile {
      display:inline-block;
      width:100px;
      height:100px;
      margin-right:10px;
      background-color:yellow;
    }

    .tile:last-child {
      margin-right:0;
    }

＆＃13;

<div class="container">
      <h3 style="background-color:red;">Title</h3>
    </div>
    <div style="width:auto;white-space:nowrap;overflow-y:hidden;">
      <div style="overflow-x:scroll;-webkit-overflow-scrolling: touch;">
        <div class="container">
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
          <div class="tile"></div>
        </div>
      </div>
    </div>

＆＃13;

Answer 1

希望Fiddle能提供帮助。

我已在最后一个瓷砖上添加了右边距以补偿容器间隙。它以这种方式计算：margin-right:calc((100vw - 400px )/2)。窗口宽度和容器宽度之差的一半（400px）。

.tile:last-child {
    margin-right:calc((100vw - 400px )/2);
}

我添加了额外的CSS，如下所示，以取消身体标记的边距。否则100vh将包含其他8px。

body {
    margin: 0;
}

Answer 2

你必须像我在下面所做的那样在容器中添加瓷砖。你的瓷砖流出容器，这就是为什么没有正确对齐的原因。

  .container {
      max-width:400px;
      margin:auto;
    }

    .tile {
      display:inline-block;
      width:100px;
      height:100px;
      margin-right:10px;
      background-color:yellow;
    }

    .tile:last-child {
      margin-right:0;
    }

    <div class="container">
          <h3 style="background-color:red;">Title</h3>
        </div>
<div class="container">
        <div style="width:auto;white-space:nowrap;overflow-y:hidden;">
          <div style="overflow-x:scroll;-webkit-overflow-scrolling: touch;">

              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
              <div class="tile"></div>
            </div>
          </div>
        </div>

<!-- end snippet -->

Answer 3

.container h3{
  margin:1rem 2rem;
}
.tile {
  display:inline-block;
  width:100px;
  height:100px;
  margin-right:10px;
  background-color:yellow;
}

.tile:last-child {
  margin-right:0;
}

<div class="container">
  <h3 style="background-color:red;">Title</h3>
</div>
<div style="width:auto;white-space:nowrap;overflow-y:hidden;">
  <div style="overflow-x:scroll;-webkit-overflow-scrolling: touch;">
    <div class="container">
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
    </div>
  </div>
</div>

Answer 4

我已在最后一个瓷砖上添加了右边距以补偿容器间隙。它以另一种方式计算：margin-right：calc（（400px -100vw）/ 2）。我使用减法运算符来找到margin-right。窗口宽度和容器宽度之差的一半（400px）。

是否有可能在HTML / CSS中实现这一点？

4 个答案: