如何將div放入3列，在窄屏幕上重新定位爲2

是的，我確實意識到這個問題的標題很差。隨意改進它。如何將div放入3列，在窄屏幕上重新定位爲2

我正在嘗試爲具有以下要求的頁面構建CSS。

有六個'盒子'。
每對盒具有等於總高度
中間對（框3和4）具有相等的高度
它們應該被一個寬屏幕上佈置爲在下面實體模型，在三列
它們應佈置爲下面的第二實體模型，在兩列的很窄的屏幕上
它們應當在單個列被佈置所有
應該有一個盒和一個正下方之間沒有間隙/它
我試圖得到它使用Twitter Bootstrap，但它不是一個要求
我寧願在CSS + JQuery /其他JS解決方案100％的CSS解決方案
它是一個企業網站如此可悲，必須在IE8 +（IE7將工作環境也不錯，雖然不是必須的，如果我們能有一個合理的後備）

the layout on wide page the layout on narrow page

這裏有一個的jsfiddle你一起玩：http://goo.gl/o2YoY

來源

2013-05-19 Krzysztof Kozmic

考慮張貼任何一小段代碼片段。 http://whathaveyoutried.com – pylover

公平點。我建立了一個我目前（可憐的）進度的「演示」版本，並將其放在jsfiddle –

必須按照該順序或更改框的順序是可以接受的嗎？ – invisal

您可以用column-count和媒體查詢相結合做到這一點：

.inner{ 
    width: 100%; 
    display: inline-block; 
} 

#outer{ 
    column-count:3; 
    -webkit-column-count:3; /* Safari and Chrome */ 
    -moz-column-count: 3; /* Firefox */ 
} 

@media (max-width: 600px) { 
     #outer{ 
     column-count:2; 
     -webkit-column-count:2; /* Safari and Chrome */ 
     -moz-column-count: 2; /* Firefox */ 
    } 
} 

@media (max-width: 300px) { 
     #outer{ 
     column-count:1; 
     -webkit-column-count:1; /* Safari and Chrome */ 
     -moz-column-count: 1; /* Firefox */ 
    } 
}

演示：http://jsfiddle.net/6wWDX/1/

的column-count瀏覽器兼容性：http://caniuse.com/#feat=multicolumn

來源

2013-05-19 02:23:37

這是一個有趣的事情。我不知道「列數」。我會調查...... –

我更新了小提琴以考慮我得到的其他要求（不同的身高和事實之間必須沒有差距）http://jsfiddle.net/ycaZJ/1/在Chrome中完美工作， Firefox和IE10。可悲的是，我還必須支持較早的IE版本，以任何方式使它在那裏工作？ –

不是我所知道的。你可以有一個js後備。 –

如何將div放入3列，在窄屏幕上重新定位爲2

回答

相關問題