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>