我正在创建一个包含四列的响应式网站。当屏幕变窄时，我希望四列变成两列。但是，当第二列比第一列短时，这种方法会失败，因为第 3 列低于 2，并且在看到第 1 列下方的第 4 列之前存在巨大差距。有没有办法使用 CSS 来避免这个巨大的差距？我不想添加额外的 HTML 元素，但是如果必须的话，我可以。
问问题
1828 次
1 回答
2
只需添加clear: left到您的第三列（使用.fourcolumn:nth-child(3)）或一般的奇数列（使用.fourcolumn:nth-child(2n+1)）
演示
[另外，最好从窄屏开始，然后转到宽屏（移动优先方法）并使用em基于媒体查询而不是基于媒体查询px（以防止用户缩放时布局中断）]
于 2012-09-23T05:49:48.827 回答