0
我是一个HTML和CSS的新手。我已经在网上借用了一些响应式网格的代码，并将其适用于我的需要。响应网格高度调整问题
我的问题是，在我的列内有响应浏览器大小的文本，而具有更多文本的列正在打破列高并抛出网格。
我在找的是当一列的文字大于另一列的同一行时，行中所有列的高度相应地调整，而不是只有最多文本改变高度的列首先，然后打破电网。
HTML和CSS如下。谢谢你的帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="section group">
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conWhat would twice or three times as many convWhat would twice or three times as many convversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
\t <div class="col span_1_of_8">
\t <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p>
\t </div>
</div>
</body>
<style>
/* SECTIONS */
.section {
\t clear: both;
\t padding: 0px;
\t margin: 0px;
}
/* COLUMN SETUP */
.col {
\t display: block;
\t float:left;
\t 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 EIGHT */
.span_8_of_8 {
\t width: 100%;
}
.span_7_of_8 {
\t width: 87.3%;
}
.span_6_of_8 {
\t width: 74.6%;
}
.span_5_of_8 {
\t width: 61.9%;
}
.span_4_of_8 {
\t width: 49.2%;
}
.span_3_of_8 {
\t width: 36.5%;
}
.span_2_of_8 {
\t width: 23.8%;
}
.span_1_of_8 {
\t width: 11.1%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 4000px) {
\t .col { margin: 1% 0 1% 0%; }
\t .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 25%; }
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1200px) {
\t .col { margin: 1% 0 1% 0%; }
\t .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 33.33%; }
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 700px) {
\t .col { margin: 1% 0 1% 0%; }
\t .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 50%; }
}
</style>
</html>