我想使用div 创建一个响应式表格布局，以便仅在移动设备上显示，其中元素的每行使用相同的高度只有 CSS/CSS3 而不是 JavaScript，也不是 jQuery 或插件。
我找到了一个工作示例，使用 JS：这里是 CODEPEN live example。
我进行了研究，但我没有找到任何工作示例仅使用纯 CSS/CSS3/HTML5（例如 flexbox）。
最好是只有浮动divs，没有hack CSS代码：布局应该有不同的列号，根据不同的设备大小，像下面的截图一样响应：
【问题讨论】：
标签： html css mobile responsive-design grid
我同意 hot_barbara，如果您需要支持任何旧版 IE 浏览器，那么 flexbox 很遗憾不是一个选项。有很多只使用 css 的解决方案，但是很多他们假设你有单行元素/网格项。
我已经用 jQuery 编写了自己的 javascript 解决方案，完整文章在这里：https://www.tenpixelsleft.com/responsive-equal-height-grid-columns/
这个想法是，您可以向函数传递一个选择器，该选择器以给定集合中的所有网格元素为目标，然后它将根据集合中的最高元素保持所有网格元素的相同高度。
/* ==================================================== *
* @param elementGroup - a group of dom objects to be iterated over and aligned
* @param offset - (int) offset number to be added to the height
* @param afterAlignment - callback function
* ==================================================== */
setElementGroupHeight = function(elementGroup, offset, afterAlignment) {
var offset = typeof offset !== 'undefined' ? offset : 0;
var tallestHeight = 0;
var elHeight = 0;
$.each(elementGroup, function() {
// Since this function is called every time the page is resized, we need to reset the height
// so each container can return to its natural size before being measured.
$(this).css('height', 'auto');
elHeight = $(this).outerHeight() + offset;
if (elHeight > tallestHeight) {
tallestHeight = elHeight;
}
});
// Set the height of all elementGroup elements to the tallest height
elementGroup.css('height', Math.ceil(tallestHeight));
// Callback
if (afterAlignment && typeof(afterAlignment) === "function") {
afterAlignment();
}
}
然后这样称呼它：
jQuery(function($) {
// Initialise on page load
var postGrid = $('.post-grid .js-align-col');
if (postGrid.length) {
setElementGroupHeight(postGrid);
$(window).on('resize', function(e, resizeEvent) {
// Realign on resize
setElementGroupHeight(postGrid);
});
}
});
在图像和字体加载竞争条件方面可能存在一些问题，这可能会导致初始高度计算出现偏差。上面的文章链接详细说明了如何最好地处理这些问题。
【讨论】：
flexboxes 和 media queries 的解决方案：
http://jsfiddle.net/szxmw7ko/4/
#container{
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
@media (max-width: 480px) {
#container div {
max-width: 98%;
}
}
@media (min-width: 480px) and (max-width: 1080px) {
#container div {
max-width: 48%;
}
}
@media (min-width: 1080px) {
#container div {
max-width: 23%;
}
}
align-items: stretch 告诉弹性项目填充cross axis 沿线的可用空间。这就是允许所有项目具有相等高度的原因。
flex-wrap: wrap 提供了制作多行弹性流的可能性。否则，所有项目都被监禁在一行中。
max-width: XX% 默认情况下，块元素将填充所有可用空间。即使项目是 flex 布局的子项，由于 flex-wrap 规则解除了将所有项目堆放在一行上的约束，它们将延伸到容器的整个宽度。
因此，设置一个必然会升高的最大宽度，可以控制您想要在一行中放置多少个项目。
@media (max-width: XX%) 最后，您只需要调整项目的宽度即可根据视口的大小定义所需的列数。
弹性盒资源：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex-wrap/
【讨论】：