項目之間沒有空白的css列/ flexbox

Question

我需要擺脫列布局中元素之間的空白。我可以使用最新的css3，因爲該網站是針對現代瀏覽器/設備的，但我需要避免使用JavaScript解決方案，以便從服務器交付的頁面不需要根據客戶端的寬度重新呈現。

使用flexbox，css列和其他技巧我需要哄一個pinterest般的佈局。 （Pinterest爲其佈局使用javascript和絕對定位，它甚至不會在js關閉的情況下渲染。）該站點具有已知寬度但高度可變的框。列數需要根據瀏覽器寬度而變化。 （我可以，如果我知道的CSS屬性來改變通過媒體查詢做到這一點。）下面是這個樣子：via

另外請注意，我不能只增加容器的高度，以填補空的空間。我想把它放在它下面，而不是讓所有的高度匹配。 （所以拉伸在上面的圖片，物品1 3和4是不是我想要的。）

事情我已經嘗試：

• CSS 3列。這看起來不錯，但項目順序錯誤，第二個項目在第一個項目下。如果這可以更改爲不同的順序，以便它們從左到右，太棒了！

• Flexbox各種柔性盒配置，我試過幾乎所有可以改變的設置。

• Javascript。是的，我知道我可以手動創建列並在調整大小時重新渲染它們。我期望避免昂貴的重新渲染操作，需要手動平衡列和顯示。對於不支持css3解決方案的舊版瀏覽器，我可以採取這種做法。我也想避免手動定位所有的項目。毛。

我已經把評論鏈接的jsfiddle因爲我不能把它放在這裏「鏈接的jsfiddle需要的代碼」。

Answer 1

使用http://desandro.github.io/masonry/砌體將有助於解決您的問題，它是Pinterest使用的。我公司目前正在使用它來開發一個程序，它非常容易和用戶友好。

Answer 2

查看本演示。這是純粹的CSS3砌體效果。從上面的鏈接

body { 
 
    font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
 
    margin: 0; 
 
    background: #e9e9e9; 
 
} 
 

 
.wrapper { 
 
    width: 95%; 
 
    margin: 3em auto; 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    background: #fff; 
 
    padding: 1em; 
 
    margin: 0 0 1.5em; 
 
    width: 100%; 
 
    height: 150px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-shadow: 2px 2px 4px 0 #ccc; 
 
} 
 
.item.black{ 
 
background-color: #000; height:200px;} 
 
.item.blue{ 
 
background-color:blue; height:250px;} 
 
.item.green{ 
 
background-color:green; height:300px;} 
 

 
@media only screen and (min-width: 400px) { 
 
    .masonry { 
 
     -moz-column-count: 2; 
 
     -webkit-column-count: 2; 
 
     column-count: 2; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
     -moz-column-count: 3; 
 
     -webkit-column-count: 3; 
 
     column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
     -moz-column-count: 4; 
 
     -webkit-column-count: 4; 
 
     column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
     -moz-column-count: 5; 
 
     -webkit-column-count: 5; 
 
     column-count: 5; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1280px) { 
 
    .wrapper { 
 
     width: 1260px; 
 
    } 
 
}

<div class="masonry"> 
 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
</div>

希望這 http://w3bits.com/labs/css-masonry/

尖晶石，對你有幫助。

Answer 3

您可以通過Flexbox的實現它：

HTML：

<div class="container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
</div> 

CSS：

.container { 
    max-width: 900px; 
    height: 470px; 
    display: flex; 
    flex-flow: column wrap; 
    align-items: flex-start; 
} 

.item { 
    height: 150px; 
} 

http://codepen.io/asim-coder/pen/vXzKgg

Answer 4

CSS3：設置保存所有8下降主要UL李向下的面板到邊距：0自動;

mainList li { 
    margin: 0 auto; /*0 giving no margins on the top and bottom of the panels, and auto making the panels use all of the space within the parent, mainList. I hope this helps.*/ 
} 

Answer 5

那麼，有點晚了，可能是這可能是一個解決方案。

我使用flex，因爲它是唯一可以根據需要更改訂單的系統。

這種方法的drawbakcs是，我需要使用一些人工元件用作分離器，以及我需要設置一個預定的高度的容器

.container { 
 
    border: 1px solid black; 
 
    width: 90%; 
 
    height: 700px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: flex-start; 
 
} 
 
.item { 
 
    height: 150px; 
 
    width: 24%; 
 
    margin: 2px; 
 
} 
 
.item:nth-child(3n + 1) { 
 
    height: 200px; 
 
} 
 
.item:nth-child(3n + 2) { 
 
    height: 250px; 
 
} 
 
.item:nth-child(4n) { 
 
    background-color: orange; 
 
    order: 40; 
 
} 
 
.item:nth-child(4n + 1) { 
 
    background-color: green; 
 
    order: 10; 
 
} 
 
.item:nth-child(4n + 2) { 
 
    background-color: lightblue; 
 
    order: 20; 
 
} 
 
.item:nth-child(4n + 3) { 
 
    background-color: yellow; 
 
    order: 30; 
 
} 
 
.divider { 
 
    width: 1px; 
 
    background-color: red; 
 
    height: 100%; 
 
} 
 
.divider:nth-last-child(3) { 
 
    order: 15; 
 
} 
 
.divider:nth-last-child(2) { 
 
    order: 25; 
 
} 
 
.divider:nth-last-child(1) { 
 
    order: 35; 
 
}

<div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="divider"></div> 
 
    <div class="divider"></div> 
 
    <div class="divider"></div> 
 
</div>