仅具有 CSS3/HTML5 的行中的响应式等高列

问题描述

我想使用 div 创建响应式表格布局，仅在 移动设备 中显示，其中元素具有 仅使用 CSS/CSS3 而不是 JavaScript、jQuery 或插件的每行高度.

我找到了一个工作示例，使用 JS:这里是

#container{显示:弹性；对齐项目:拉伸；flex-wrap: 包裹;}@media(最大宽度:480px){#容器div {最大宽度:98%；}}@media (min-width: 480px) 和 (max-width: 1080px) {#容器div {最大宽度:48%；}}@media(最小宽度:1080px){#容器div {最大宽度:23%；}}

align-items: stretch 告诉 flex 项目填充 横轴.这就是允许所有项目具有相等高度的原因.

flex-wrap: wrap 提供了制作多行 flex 流的可能性.否则，所有项目都被囚禁在一行.

max-width: XX% 默认情况下，块元素将填充所有可用空间.即使项目是 flex 布局的子项，由于 flex-wrap 规则解除了将所有项目堆积在一行上的限制，它们也会延伸到容器的整个宽度.因此，设置最大宽度(必然会升高)可以控制您在一行中需要多少个项目.

@media (max-width: XX%) 最后，你只需要调整一个项目的宽度来定义你想要的列数，具体取决于大小视口.

弹性盒资源:
https://css-tricks.com/snippets/css/a-flexbox 指南/
https://css-tricks.com/almanac/properties/f/flex-换行/

I would like to create a responsive table-layout with the use of the div, to be displayed for mobile devices only, where the elements has equal height for each rows using only CSS/CSS3 and not JavaScript, nor jQuery or plugin.

I found a working example, that uses JS: here is the CODEPEN live example.

I've made a research, but i did not find any working example that make use only of pure CSS/CSS3/HTML5 (flexbox for example).

The best is to have only floating divs, and no hack CSS code: the layout should have different column number, as per different device size, working responsive like the screenshots below:

Mobile Layout

Tablet Layout

Desktop Layout

解决方案

A solution with flexboxes and 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 tells to the flex items to fill the avalaible space along the cross axis. This is what allows to have equals height for all items.

flex-wrap: wrap gives the possibility to make a multiline flex flow. Otherwise, all items are jailed into one line.

max-width: XX% by default a block element will fill all avalaible space. Even if items are child of a flex layout, because of the flex-wrap rule which lifts the constraint of piling all the items on one row, they will stretch over the entire width of the container.So setting a maximum width, which will necessarily raised, gives the control of how many items you want on a row.

@media (max-width: XX%) finally, you have just to adapt the width of an item to define how many columns you want depending on the size of the viewport.

Flexboxes resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex-wrap/

这篇关于仅具有 CSS3/HTML5 的行中的响应式等高列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！