html - 响应式设计混合内容列

Question

我一直在寻找一种可扩展的方式来从网页中获取 2 列内容，并以可扩展的方式响应地将其折叠为 1 列。问题说的很清楚here在图片中，称为混合内容问题。

这篇文章大约有一年的历史了，我想知道在解决这个特定问题的跨浏览器框架或编码实践方面是否取得了进展。

对于上下文，我有两列内容，最初按类别分隔，每列按日期排序。我希望它在适当的时候折叠成 1 列，并且该列的所有内容都按日期排序。

欢迎链接到教程、文章或其他资源。

Answer 1

有趣的是，您的响应式示例网站中的 3 列折叠为 2 列，但没有缩减为 1 列。从技术上讲，这些列不会折叠，它们会随着屏幕宽度变窄而向下跳过一行。只有一列，列宽扩展到 100%。我让它小于 100%，所以出于审美原因有一个边界余量。针对各种设备宽度使用“@media”方法。

请记住，我不使用 100% 作为全宽，因为在响应式设计中，如果您在列中放置边框，即使是 1px 的边框宽度也会弹出水平滚动条。

以下各列在小于 480 像素的智能手机屏幕上变为全宽:

例子

.column1of1 { 宽度:100%；

.column1of2 { 宽度:48%；

.column1of3 { 宽度:31%；

@media only screen and (max width: 480px) {

.column1of1, .column1of2, column1of3 {
宽度:96%；
左边距:1%；
字体大小:80%；

希望以上内容对您有所帮助。我不认为我理解你对日期的计划。