創建不同的滾動純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>