我可以製作僅限CSS的砌體佈局嗎？

-1

首先：是的，這個問題與Vertical vs. Horizontal Masonry CSS-only 我可以製作僅限CSS的砌體佈局嗎？

相似但是由於沒人還沒有回答這個問題，我會再試一次。我已經使用CSS列屬性爲我的WordPress帖子設置了砌體佈局。這很好，但是我的帖子現在沒有按日期排序（實際上它們並不是用戶可以得到的）。

#container { 
 
    columns: 3; 
 
    column-gap: 10px; 
 
    width: 800px; 
 
} 
 
.element { 
 
    display: inline-block; 
 
    background-color: red; 
 
    margin-bottom: 10px; 
 
}

<div id="container"> 
 
    <div class="element"> 
 
     <p>1</p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
     </p> 
 
    </div> 
 
    <div class="element"> 
 
     <p>2</p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
      sanctus est Lorem ipsum dolor sit amet. 
 
     </p> 
 
    </div> 
 
    <div class="element"> 
 
     <p>3</p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
      sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
     </p> 
 
    </div> 
 

 
    <div class="element"> 
 
     <p>4</p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
      sanctus est Lorem ipsum dolor sit amet. 
 
     </p> 
 
    </div> 
 
    <div class="element"> 
 
     <p>5</p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
      sanctus est Lorem ipsum dolor sit amet. 
 
     </p> 
 
    </div> 
 
    <div class="element"> 
 
     <p>6</p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
      sanctus est Lorem ipsum dolor sit amet. 
 
     </p> 
 
    </div> 
 
</div>

，因爲它要求項目具有相同的高度Flexbox的也不會在這裏工作。

這裏是我的問題的小提琴：https://jsfiddle.net/9m24172b/

所以要儘量簡短，這裏是從上面提到的文章報價：

電流：

1 | 4 | 7 
2 | 5 | 8 
3 | 6 | 9

期望：

1 | 2 | 3 
4 | 5 | 6 
7 | 8 | 9

使用純CSS的任何想法？

來源

2017-01-13 Rico Ocepek

那麼，有人建議不要使用列，但flexbox。你嘗試過嗎？ – GolezTrol

如果這是另一個問題的完全重複，那麼stackoverflow會給出您在其他問題上設置賞金以獲得更多關注的選項。 – Dekel

@GolezTrol是的，但flexbox佈局要求所有項目具有相同的高度和我的文章大小可以有很大的不同.. –

CSS網格即將到來，這使得純粹的CSS砌體變得輕而易舉。然而，它還沒有結束，我們必須等待並觀察跨瀏覽器的錯誤。我知道這並不能幫助你，但這是隧道盡頭的亮光。

瞭解關於CSS Grid的更多信息：https://rachelandrew.co.uk/presentations/css-grid

來源

2017-01-13 14:36:21

我懷疑CSS網格可能是答案。任何一個例子的機會？ IE已經支持CSS Grid一段時間了。 – Alohci

感謝您分享您的想法，但正如您已經表示，它現在不幫助我.. http://caniuse.com/#feat=css-grid –

我可以製作僅限CSS的砌體佈局嗎？

回答

相關問題