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

Question

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

/*  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%;
  }
}

<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>

Answer 1

帕特里克是对的。你需要使用 flex-box 来实现它。这是使用您的代码的非常简单的 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>