1. 首頁
  2. 問答
  3. 兩列布局 - Divs離開額外空間

兩列布局 - Divs離開額外空間

2012-06-26 28 views
0

首先，我想說，我不想用Javascript做到這一點。兩列布局 - Divs離開額外空間

http://jsfiddle.net/WqrBY/2/

在此的jsfiddle，我有兩列，但右下角的div顯然與底部靠左對齊。我希望能夠（不調整標記）在右上方移動右下方的div（就像左下角在左上方一樣）。

我不想更改標記，因爲當div切換到較小屏幕尺寸的一列布局時，div的順序很重要。

任何人都可以幫助我嗎？

來源

2012-06-26 hehewaffles

+0

不可能沒有JS或標記更改 –

+0

我同意這是不可能的給定的約束。 – thirtydot

回答

3

我要說的是，我不知道爲什麼這會起作用......我將繼續擺弄它來測試它。評論歡迎。

這裏是我的fiddle

編輯：

我知道你特別提到，你不想「改變」，因爲div排序的標記。你願意加入標記嗎？這不應該改變信息的順序，但它可能是一個簡單的修復你想要做的事情：http://jsfiddle.net/tracyfu/WqrBY/7/

來源

2012-06-26 22:42:14

+0

不幸的是，http://jsfiddle.net/WqrBY/4/但這真的很酷，謝謝 – hehewaffles

+2

聰明的解決方案。不要忘記IE7內聯塊解決方法 - 添加'zoom：1; * display：inline;'給你的行內塊元素使它在IE7中正常工作。它的工作原理是左邊的兩個元素左移，而不管右邊的兩個元素是做什麼的。 –

+0

我認爲這裏的想法是，無論是左邊還是右邊都可能是更高的一面，並且'＃左上角/'＃左下角*或*'＃top- right' /'＃底部right'。像這樣的佈局是[jQuery Masonry]（http://masonry.desandro.com/）的創建目的，因爲這對於CSS來說是不可能的（在所有常用的瀏覽器中都支持）。 – thirtydot

相關問題

 相關問題