引導山坳的沒有組織很好

Question

嗨親愛的人更聰明，

我希望你能幫助我在引導一個也許是簡單的問題。見網站附：

http://www.marciplan.com/prt-2/

爲什麼不把物品（空白頁）配合下彼此很好？我希望他們看起來像這樣1 我希望有人想要付出努力去幫助這個假人。多謝:)

親切的問候， Marciplan

Answer 1

這是因爲第二條的高度比最上面一行的另外兩篇文章越大。解決這個問題的方法是爲每篇文章設定一個固定的高度（比如說400px最適合）。

但是在較小的設備上，您可能需要使用媒體查詢來調整高度。

編輯： 嘗試此類似Pinterest的電網 Masonry

Answer 2

你首先需要一個clearfix類添加到<div id="content">爲浮動孩子正在崩潰的高度：<div id="content" class="clearfix">。

嘗試添加以下的＃內容CSS選擇器：

#content { 
    display: flex; 
} 

這似乎我對其進行修復。我將它包裝在一個媒體查詢，使正常的堆疊行爲時瀏覽器大小或更小的設備上觀看不受影響：

@media (min-width: 768px) { 
    #content { 
     display: flex; 
    } 
} 

編輯：

而且你的評論，你還應該flex-wrap: wrap;屬性添加到包裝<div id="content" class="clearfix"> ...默認情況下，Flexbox的趨向，試圖在同一行適合孩子：

@media (min-width: 768px) { 
    #content { 
     display: flex; 
     flex-wrap: wrap; 
     } 
    }