只有CSS3 / HTML5的行中的响应相等高度列 [英] Responsive equal height columns in rows with CSS3/HTML5 Only

问题描述

我希望使用 div 创建响应式表格布局，以便仅显示移动设备，其中元素对于每行只有高度相等，只使用CSS / CSS3而非JavaScript，也不使用jQuery或插件。

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

  #conta iner {
 display：flex; 
 
 align-items：stretch; 
 flex-wrap：wrap; 
} 
 
 
 @media（max-width：480px）{
 #container div {
 max-width：98％; 
 b 
 $ b @media（min-width：480px）和（max-width：1080px）{
 #container div {
 max-width：48％ ; 
} 
} 
 @media（min-width：1080px）{
 #container div {
 max-width：23％; 
 
 
 $ / code $ / pre 
 $ b $   align- items：stretch  告诉flex项目沿横轴。这是允许所有物品具有相等高度的东西。  
 
 
   flex-wrap：wrap  提供了创建多行柔性流的可能性。否则，所有项目都将被分成一行。
 
 
 
   max-width：XX％ 默认情况下，块元素将填充所有可用空间。即使项目是flex布局的子项，由于 flex-wrap 规则解除了在一行上堆叠所有项目的约束，它们将在整个宽度上的容器。 
因此设置一个最大宽度（必须提高），可以控制一行中需要的项目数。  
 
 
   @media（max-width：XX％） 根据视口的大小调整项目的宽度以定义您想要的列数。
 
 
 
 Flexbox资源：
 
  https://css-tricks.com/snippets/css/a-guide-to -flexbox /  
 
  https：// css-tricks.com/almanac/properties/f/flex-wrap/  
 
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的行中的响应相等高度列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！