CSS沿着邊框對齊元素，而不是基線或頂部

有沒有辦法像純粹的CSS一樣實現Google Keep的筆記對齊？我試過display: inline(-block);，但在某些情況下唯一可能的比對是top, bottom, baseline和middle。另外display: flex;和一些額外的屬性給我一個更好的分佈在我的元素，但他們仍然在一條直線上對齊。我只能想到JavaScript的解決方案，我浪費了Google搜索的時間，但找不到任何東西。有沒有相當簡單的CSS方法呢？CSS沿着邊框對齊元素，而不是基線或頂部

編輯：這JSFiddle顯示它目前的樣子，this是我希望它看起來如何。

來源

2016-01-20 Niklas Vest

您可以加入你想要達到什麼樣的一個例子？ – ingridly

檢查最新的編輯:) –

在這裏你去：http://cssdeck.com/labs/css-only-pinterest-style-columns-layout – Ferrrmolina

那麼，根據this pen，你可以做這樣的事情：

HTML：

<div id="container"> 
    <div class="item color--lightblue"></div> 
    <div class="item color--sblue"></div> 
    <div class="item color--blue"></div> 
    <div class="item color--darkblue"></div> 
</div>

CSS：

#container { 
    width: 400px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -moz-column-fill: auto; 
    column-count: 2; 
} 

.item { 
    height: 200px; 
    display: inline-block; 
    width: 200px; 
    margin: 0px 5px; 
} 
.item:nth-child(2) { 
    height: 230px; 
} 
.item:nth-child(3) { 
    height: 250px; 
} 
.item:nth-child(n+1) { 
    margin-top: 5px; 
} 
/* Only for demo */ 
.color--sblue { 
    background: steelblue; 
} 
.color--blue { 
    background: blue; 
} 
.color--lightblue { 
    background: lightblue; 
} 
.color--darkblue { 
    background: darkblue; 
}

Live demo

這3個屬性使魔：

列數：http://www.w3schools.com/cssref/css3_pr_column-count.asp

柱間隙：http://www.w3schools.com/cssref/css3_pr_column-gap.asp

欄填寫：http://www.w3schools.com/cssref/css3_pr_column-fill.asp

來源

2016-01-20 20:34:42 Ferrrmolina

我剛剛注意到，該解決方案仍然不符合我的需求，因爲它類似於@Mr Lister對我的文章的評論，無論如何都會接受。 –

我使用更高效的代碼重新編輯了我的答案。問題是，如果你使用浮動，可以有明顯的原因對齊。使用FlexBox將會非常困難，並且內聯塊與浮動塊大致相同。所以我不知道如何去做，誠實。 – Ferrrmolina

Ferrrmolina我會在接下來的幾天嘗試它，儘管我可能會最終使用@Mr List flexbox方法。謝謝你們兩位。 –

CSS沿着邊框對齊元素，而不是基線或頂部

回答

相關問題