Question

我在我的网站上使用自动高度，以便高度将随着div中的内容量而变化。但是，即使在调整大小（响应）时，我需要同一行中的3个div具有相同的高度。

目前，div 1或2在调整浏览器大小时获得了不同的高度。

有没有办法对此进行编码，以便无论您为响应度调整多少，所有三个都将保持相同的高度？

CSS：

#integel {
    background-color:rgba(255,255,255,1);
height:auto;
width:30%;
    min-height: 30em;
display:inline-block;
    line-height:2.3vw;
      overflow:hidden;
    float:left;
    margin-top:0%;
    margin-bottom:5%;
    margin-left:2.5%;
    margin-right:0%;
    color:black;
    border:solid rgba(63, 146, 195, 1) 0.3vmax;
    }




#integel1 {
    background-color:rgba(255,255,255,1);
height:auto;
width:30%;
    min-height: 30vmax;
display:table-row;
    line-height:2.3vw;
      overflow:hidden;
    float:left;
    margin-top:0%;
    margin-bottom:5%;
    margin-left:2.5%;
    margin-right:0%;
    color:black;    
    border:solid rgba(63, 146, 195, 1) 0.3vmax;
}

#integel3 {
    background-color:rgba(255,255,255,1);
height:auto;
        min-height: 30vmax;
width:30%;
display:inline-block;
    line-height:2.3vw;
      overflow:hidden;
    float:left;
    margin-top:0%;
    margin-bottom:5%;
    margin-left:2.5%;
    margin-right:0%;
    color:black;
        border:solid rgba(63, 146, 195, 1) 0.3vmax;
}

正如您在www.gester.nl（服务部分）

所见

Answer 1

使用FLexbox！

这样的事情：

.wrapper {
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  width: 30%;
  padding: 1%;
}

A js Fiddle

Answer 2

您好

我接受您链接的网站元素。如果它们应该像现在一样（第一行为3，第四行为全尺寸），您可以在下面找到它的代码段。如果您希望在一行中包含4个，只需将flex的{{1}}更改为25％，并删除#services div的{{1}}。

＆＃13;

flex

＆＃13;

#services div:last-child

＆＃13;

有关CSS3 Flexbox的更多信息，例如： on W3Schools page。

希望这很有用。

如何使3个div块自动高度和相同的高度

2 个答案:

您好

干杯