使用纯 CSS 创建具有不同滚动的自动水平滚动图块

Question

我想使用纯 css 不使用 JS
创建新闻水平滚动图块滑块

我试过使用 FlexBox，

.spotlight-wrapper {
  width: 100%;
  overflow-x: auto;
}
.spotlight-wrapper .spotlight {
  list-style: none;
  height: 230px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: bottom;
  padding: 0;
}
.spotlight-wrapper .spotlight li {
  width: 220px;
  height: 220px;
  background: #ccc;
  margin: 5px;
}
.spotlight-wrapper .spotlight li.small {
  width: 105px;
  height: 105px;
}
.spotlight-wrapper .spotlight li.medium {
  width: 220px;
  height: 105px;
  /*
     * Idea to fix it, but will cause
     * issue if the medium tile in the
     * bottom level, and there are 2 small
     * tiles next to it in the top level
    */
  /* & + .small + .small{
     display: block;
     clear: both;
     justify-content: bottom;
     margin-top: 120px;
     margin-left: -110px;
    } */
}
.spotlight-wrapper .spotlight li.red {
  background: red;
}

<div class="spotlight-wrapper">
 <ul class="spotlight">
  <li>Tile #1</li>
  <li class="small">Tile #2</li>
  <li class="small">Tile #3</li>
  <li class="medium">Tile #9</li>
  <li class="medium">Tile #10</li>
  <li>Tile #2</li>
  <li class="medium red">Tile #1</li>
  <li class="small red">Tile #2</li>
  <li class="small red">Tile #3</li>
  <li>Tile #5</li>
  <li>Tile #7</li>
  <li>Tile #8</li>
  <li class="medium">Tile #9</li>
  <li class="medium">Tile #10</li>
  <li>Tile #11</li>
  <li>Tile #12</li>
  <li class="small">Tile #13</li>
  <li>Tile #14</li>
  <li>Tile #15</li>
  <li>Tile #16</li>
  <li>Tile #17</li>
  <li>Tile #18</li>
  <li>Tile #19</li>
  <li>Tile #20</li>
 </ul>

但是如果你检查红色方块，它没有正确对齐，我可以使用边距修复它（检查注释块）但如果宽瓷砖位于底行，并且下一个块中有 2 个小瓷砖，则会导致其他问题，

此外，如果只有一个小图块，则会创建空 space。

Answer 1

对于初学者来说，我经常使用 flexbox，我非常喜欢你想要实现的目标，并且会修改我自己的一些东西来像那样工作。

其次，您没有告诉 flexbox 如何弯曲 li 元素。在弹性元素上仅定义 width 和 height 会强制 flexbox 仅使用这些值并且根本不灵活。

更新

一个 flexbox 行不能在相同行上将不同大小的框彼此叠加（对于有行的 flexbox 列也是如此）。这实际上意味着如果你想要你的解决方案，你将需要一个包含 2 行 (ul) 的主列，每行 height: 105px 并在适当的情况下将 li 放在任一行中。

另一种选择是单个 flexbox 行 (ul) 和子 li 包裹 flexbox 行，实际上嵌套 small 和 medium 类.

我想我会选择第二种解决方案。

正如您从代码中看到的，您的主要 'lightstrip' 已变成一排框，每个框包含 3 个元素：2 个 spot 和一个 'strip'。

我删除了对 ul 和 li 元素的引用，使其更加灵活。这样你就可以使用任何类型的容器作为灯箱。

ul,ol,li { list-style: none; padding: 0; margin: 0 }

.armature {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.lightstrip {
  height: 210px;
  display: flex;
  flex-flow: column wrap;
  padding: 0;
}

.lightbox {
  width:  210px;
  height: 210px;
  
  display: flex;
  flex-flow: row wrap;
}

.spot {
    flex: 1 1 100px;
    height: 100px;
    margin: 2px;
    background-color: rgba(0,255,0,.3);
}
.strip {
    flex: 1 1 200px;
    height: 100px;
    margin: 2px;
    background-color: rgba(255,0,0,.3);
}

<div class="armature">
    <div class="lightstrip">
        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="strip"></div><div class="spot"></div><div class="spot" ></div></div>

        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>
        <ul class="lightbox"><li class="strip"></li><li class="spot"></li><li class="spot" ></li></ul>
        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>

        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div>
        <div class="lightbox"><div class="strip"></div><div class="spot"></div><div class="spot" ></div></div>

        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>
        <ul class="lightbox"><li class="strip"></li><li class="spot"></li><li class="spot" ></li></ul>
        <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul>
    </div>
</div>

使用纯 CSS 创建具有不同滚动的自动水平滚动图块

Create Automated Horizontal Scrolling Tiles with different scrolling with pure CSS

css

slider

flexbox

metro-ui-css