Drop floats--基本的CSS佈局問題

我正在爲一個令人沮喪且深刻的CSS問題摔跤，這個問題由下圖所示，以及一個js小提琴here。我試圖通過浮動塊元素來實現流體網格佈局，這些元素由百分比寬度和不同高度定義，這將線性化 - 即在某個斷點處更改爲width: 100%（在小提琴中有最大寬度爲768px的媒體查詢）。請注意，我需要塊以線性化的方式將兩個主要的colunmns「編織」在一起，如小提琴中所示。正如我的圖中的「新聞/發言」塊所表明的那樣，我在浮動元素「下降」時出現問題並且未按需要垂直對齊。Drop floats--基本的CSS佈局問題

grid layout diagram

我都想盡磚石型的jQuery插件可以找我，和他們都不與流體佈局一致或可靠的方式來執行。我也知道inline-block方法，但怪癖/限制造成他們自己的問題。此外，flexbox看起來很棒，但目前的有限支持尤其是這個項目的一個問題。

我打開基於jQuery的方法 - 即強制某些塊與其他塊的底部對齊，但更喜歡基於css的塊。我意識到，我總是可以對「丟棄」元素應用負邊距，但這不是一個非常優雅的解決方案。

任何有關這個「浮動下降」問題的幫助最受讚賞。

來源

2015-05-27 nickpish

從浮''改變.item.w1'：left'到'顯示：inline-block的;'似乎解決這個問題，但你提到這種方法的「怪癖/限制」？ https://jsfiddle.net/7Lc7ofm6/ –

@RickHitchcock他可能意味着將內聯塊應用於'.w1'和'.w2'。但是，我發現你的解決方案沒有問題 – zgood

@zgood - 是的，我的意思是指所有元素都使用了inline-block，但是還沒有嘗試過僅用於左浮動元素（即'item.w1'）。謝謝，我會在我的網站上給它一個鏡頭。 – nickpish

我不確定使用inline-block會遇到什麼「怪癖/限制」，但如果僅將它應用於.item.w1，它似乎可行。

您還需要在這裏刪除float: none：

@media only screen 
and (max-width : 768px) 
and (orientation : portrait) { 
    .item.w1, .item.w2 { 
    float: none; 
    width: 100%; 
    } 
}

Fiddle

來源

2015-05-27 17:51:34

謝謝里克，我會給你一個機會並報告回來。我在使用'inline-block'而不是'float'進行佈局時所提到的「怪癖/限制」在這裏詳細介紹[http://joshnh.com/2012/02/07/why-you-should-使用內聯 - 嵌段 - 當定位元素/）;然而，正如我上面提到的，我沒有嘗試過僅僅爲了某些元素而使用它，並且保持對其他元素的「浮動」。我將它應用到我的項目中，看看會發生什麼。感謝您的幫助。 – nickpish

Drop floats--基本的CSS佈局問題

回答

相關問題