Question

我正在使用响应式网格系统，好吧，responsivegridsystem.com，我遇到了一个问题。我正在一个页面上进行多个2列网格（一个在另一个下面），但是这些列彼此相邻并不是我想要的相同高度。有没有办法让列相互匹配，例如，较小的列是否满足较长的列的高度而不必设置严格的高度？谢谢！

＆＃13;

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF TWO  */

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.2%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}

@media only screen and (max-width: 480px) {
  .span_2_of_2,
  .span_1_of_2 {
    width: 100%;
  }
}

＆＃13;

<div class="section group">
  <div class="col span_1_of_2">
    This is column 1
  </div>
  <div class="col span_1_of_2">
    This is column 2
  </div>
</div>

＆＃13;

Answer 1

帕特里克是对的。您需要使用flex-box才能实现这一目标。这是使用您的代码的一个非常简单的弹性框片段。

/*  SECTIONS  */
.section {
display: flex;
clear: both;
padding: 0px;
margin: 0px;
}

.bg1 {
  background-color: blue;
}

.bg2 {
  background-color: yellow;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.span_2_of_2 {
    width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col { 
    margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}

<div class="section group">
 <div class="col span_1_of_2 bg1">
  This is column 1
 </div>
<div class="col span_1_of_2 bg2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet odio scelerisque, sollicitudin metus sit amet, aliquam libero. Vestibulum convallis sapien lacus,
 </div>
</div>

Answer 2

除非你使用的是flex-box，否则你无法让你的专栏与css保持相同的高度......过去我使用javascript解决了这个问题，并创建了一个实用工具对于具有类.match-height的每个dom元素，查看父级并找到最高的子级，获取其高度并将其应用于第一个后代。

我在我的工作电脑上，所以我没有可以分享的代码，但看起来有插件做类似的事情： http://brm.io/jquery-match-height/

此外，您应该将问题的标题更改为：使响应网格列具有相同的高度

由于目前的标题可能令人困惑。

使响应式网格列具有相同的高度

2 个答案: