Javascript css为响应性网站提供可变数量的数据列

这不是“正常”的数据显示。我正在从数据库（剧院事件）中读取记录，并希望以整齐的行和列显示它们。一个非响应的、基于表格的示例位于

我想要的是，随着屏幕大小的减小，列的数量变为2，然后变为1。我在这里找到了一些关于如何做到这一点的提示，例如和，这导致了在
它朝着正确的方向发展，但也存在一些问题

第一个问题似乎是，我需要一行中的所有单元格大小相同，在我们知道行中有多少个单元格之前，无法计算出最大的单元格（从而计算出其他单元格的大小）

第二个问题是，每个活动的各个区域需要对齐，例如，每个图像的顶部应该是水平的…但我们不知道图像或文本的深度

我在tables版本中修复了这个问题，一次构建一行4个，标题、图片等各有一行。这很好，但（据我所知）无法响应。
如果我知道屏幕大小，我可以通过php提供正确数量的列，但是，当然，这不起作用，因为媒体查询是客户端的，而php不是

（所有内容都被包装在Joomla页面中，但我认为这不会产生任何额外的问题。）

总而言之，我被卡住了！如有任何建议，我们将不胜感激。
史蒂夫

---

代码片段：（这是一个近似值，因为所有代码都是PHP生成的）

$（窗口）.load（函数（）{
var col_height=0；
var col_elem；
$（'.col'）。每个（函数（）{
$this=$（this）；
如果（$this.outerHeight（）>col_height）{
col_elem=这个；
col_height=$this.outerHeight（）；
}
});
$（'.col'）。高度（col_高度）；
}); 
.clear{clear:both；}
上校{
边框：1px虚线；
最小高度：20px；
边缘底部：30px；
宽度：100%；
浮动：左；
框大小：边框框；
}
@媒体屏幕和屏幕（最小宽度：480px）{
上校{
宽度：50%；
}
}
@媒体屏幕和屏幕（最小宽度：880px）{
上校{
宽度：25%；
}
}
表1.whatson{
表布局：固定；
左边距：自动；
右边距：自动；
边界：无；
}
表1.whatson td{
文本对齐：居中；
垂直对齐：顶部；
填充物：5px；
宽度：220px；
颜色：#000000；
位置：相对位置；
}
.whatson头衔{
字体大小：大号；
字体大小：粗体；
}	
.whatson日期{
字体大小：粗体；
}	
tr.sg-link-row{
高度：50px；
}
分区sg-read-more{
位置：绝对位置；
左：15px；
底部：2px；
}
分区sg-read-more a{
显示：块；
背景：url（images/readmore.png）不重复0；
宽度：80px；
高度：40px；
文本缩进：-9999px；
}			
div.sg-read-more a:悬停{
背景位置：0-40px；
}	
分区sg-预订-机票{
位置：绝对位置；
右：15px；
底部：2px；
}
sg分区-预订-机票a{
显示：块；
背景：url（images/buy ticket.png）不重复0；
宽度：80px；
高度：40px；
文本缩进：-9999px；
}			
sg-book-ticket a组：悬停{
背景位置：0-40px；
}

受限制
图片占位符
2014年11月26日至29日晚上7:30

科茨沃尔德球员

查找更多占位符
灰姑娘

图片占位符
2015年1月21日至24日和28日至31日下午7:30。（两个星期六下午2时30分的日场）

科茨沃尔德球员

查找更多占位符
汉秋
图片占位符
2015年2月6日

红蜻蜓制作公司

查找更多占位符
勃朗特的季节-简·爱

图片占位符
2月11日晚上7:30

有线电视剧场
查找更多占位符
勃朗特季节-呼啸山庄
图片占位符
2月13日晚上7:30
有线电视剧场
查找更多占位符
勃朗特季节-威尔德费尔庄园的承租人
图片占位符
2月13日晚上7:30
有线电视剧场
查找更多占位符
您的问题陈述得很好，但解决方案需要亲自实践代码。发布带有最新代码的codepen/jsfiddle，您将更容易获得帮助。很抱歉，这是否定的，但您使用的是表格布局，这是一种糟糕的做法。不幸的是，使用表格进行布局的响应式设计几乎是不可能的。最好的办法是使用一个网格系统（比如简单网格）重新设计，alread有你想要的内置功能。Shawn-花了一段时间，因为所有的代码都是php生成的，但这是一个近似值-帕特-我知道表不是要走的路-这就是为什么我问：-）我使用了很多网格系统（Joomla内置了引导功能）但我仍然找不到解决这个问题的方法。。。