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

Question

我想用没有 JS 的纯 css 创建新闻水平滚动图 block slider

我试过使用 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>

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

此外，如果只有一个小图 block ，则会创建空白空间。

Answer 1

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

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

更新

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

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

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

正如您从代码中看到的，您的主要“灯带”已变成一排框，每个框包含 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>