在HTML中，如何將兩列合併爲一個用於移動屏幕？

我有一個網站，有兩列divs用戶可能想要閱讀的東西。他們不保證是相同的垂直高度。在HTML中，如何將兩列合併爲一個用於移動屏幕？

當在一個小型瀏覽器或移動設備上查看網站時，我希望這兩列合併成一列，其中各項彼此交錯。

例如，正常：

[A1] [B1 
[A2 B1] 
A2] [B2 
[A3] B2] 
[A4] [B3]

在移動：

[A1] 
[B1 
B1] 
[A2 
A2] 
[B2 
B2] 
[A3] 
[B3] 
[A4]

是否有一個良好的CSS方式與響應的設計做到這一點？我使用的是像Pure或Gumby這樣的響應式樣式表。或者我必須使用JS，在這種情況下，有什麼建議如何最好地與JS做？

來源

2014-10-01 Some Guy

如果使用純，看到http://purecss.io/grids/ – laruiss 2014-10-01 16:03:17

什麼是當前的標記？目前的造型是什麼？ – 2014-10-01 16:23:12

沒有真正的「流暢」的方式來做你正在做的事情。但我想從某種意義上說，每個人都可以擁有自己的班級。然後你將它們向左或向右移動。（無論他們需要什麼）。由於模式大部分是左右右下，左右，下，左右...重複。

然後當你需要組合的列時，你可以將它們的寬度設置爲100％或顯示塊。

（分隔成兩列這一點。但是看它，好像它是相同的列表。）

http://jsfiddle.net/uemu68v6/

.side-by-side li{width: 50%;display: inline-block;} 
.side-by-side .l{float: left;} 
.side-by-side .r{float: right;} 

.block li{width: 100%;display: block;} 
.block{border-top: 1px solid black; margin-top: 25px;padding-top: 25px;clear: both;}

來源

2014-10-01 16:15:25

你不得不留意瀏覽器兼容性問題，但你可以使用新的CSS3列數。

下面是一個例子... http://jsbin.com/dipafa/1/edit

來源

2014-10-01 16:18:13

在HTML中，如何將兩列合併爲一個用於移動屏幕？

回答

相關問題