使用纯CSS

Question

我想用没有JS的纯CSS创建新闻水平滚动图块滑块

我尝试使用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个小的瓷砖，则会导致其他问题，

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

Answer 1

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

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

<强>更新

flexbox行不能在相同行上将不同大小的框放在彼此之上（对于包含行的flexbox列也是如此）。这实际上意味着，如果您需要解决方案，则需要一个包含2行（ul）每个height: 105px的主列，并在适当的任一行放置li。

另一个选项是一个Flexbox行（ul），其中包含子li的包裹Flexbox行，实际嵌套small和medium类

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

正如您从代码中看到的那样，您的主要＆＃39; lighttrip＆＃39;已成为一排方框，每个方框包含3个元素：2 spot＆＃39; s＆＃39; strip＆＃39;。

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

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;