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>