我正在创建一个包含四列的响应式网站。当屏幕变窄时，我希望将四列变成两列。但是，当第二列比第一列短时，此方法将失败，因为第三列低于2列，并且在看到第一列之下的第四列之前存在巨大差距。是否有办法使用CSS来消除这种巨大差距？我不想添加其他HTML元素，但是如果需要的话。
http://jsfiddle.net/ACJHg/
最佳答案
只需将clear: left添加到第三列（使用.fourcolumn:nth-child(3)）或一般添加到奇数列（使用.fourcolumn:nth-child(2n+1)）
demo
[另外，最好从窄屏开始，然后转到宽屏（移动优先方法）和use em based media queries instead of px based ones（以防止用户缩放时布局中断）。
关于html - 四列对两列的响应度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12549863/