创建不同的滚动纯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; 
 
    /* 
 
\t \t \t \t * Idea to fix it, but will cause 
 
\t \t \t \t * issue if the medium tile in the 
 
\t \t \t \t * bottom level, and there are 2 small 
 
\t \t \t \t * tiles next to it in the top level 
 
\t \t \t \t */ 
 
    /* & + .small + .small{ 
 
\t \t \t \t \t display: block; 
 
\t \t \t \t \t clear: both; 
 
\t \t \t \t \t justify-content: bottom; 
 
\t \t \t \t \t margin-top: 120px; 
 
\t \t \t \t \t margin-left: -110px; 
 
\t \t \t \t } */ 
 
} 
 
.spotlight-wrapper .spotlight li.red { 
 
    background: red; 
 
}

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

但是，如果您检查红色瓷砖，它不正确的方式对齐，我可以使用边距修复它（检查com但是如果宽瓦片在最下面的行中，并且在下一个块中有2个小瓦片会引起其他问题，并且在下一个块中有2个小瓦片，

另外，如果只有一个小瓦片，则将创建空的空间。

Answer 1

对于初学者来说，我使用flexbox工作了很多，我非常喜欢你正在努力实现的目标，并且会修改我自己的一些东西以便像那样工作。

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

UPDATE

甲Flexbox的行不能把不同尺寸的盒子上的相同行彼此的顶部（同样是用于与行Flexbox的列真）。这实际上意味着如果你想要你的解决方案，你将需要一个有2行的主列（ul），每个height: 105px并且在合适的位置放置li。

另一种选择是一个Flexbox的行（ul）与被包装Flexbox，就行，其实筑巢small和medium班孩子li的。

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

正如您从代码中看到的那样，您的主“灯箱”已成为一排箱子，每个箱子包含3个元素：“spot”和“条”。

我删除了对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>