响应式网格高度调整问题
[英]responsive grid height adjustment issue
问题描述
我是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"> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> </div> </body> <style> /* 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 EIGHT */ .span_8_of_8 { width: 100%; } .span_7_of_8 { width: 87.3%; } .span_6_of_8 { width: 74.6%; } .span_5_of_8 { width: 61.9%; } .span_4_of_8 { width: 49.2%; } .span_3_of_8 { width: 36.5%; } .span_2_of_8 { width: 23.8%; } .span_1_of_8 { width: 11.1%; } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 4000px) { .col { margin: 1% 0 1% 0%; } .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) { .col { margin: 1% 0 1% 0%; } .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) { .col { margin: 1% 0 1% 0%; } .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>
1 个解决方案
解决方案1
0 已采纳 2016-05-07 12:01:16
float是有罪财产。 请避免在2016年进行花车布置。 太古了。 如果使用内联块更改浮动，则效果最佳。
/* SECTIONS */ .section { clear: both; padding: 0px; font-size: 0; margin: 0px; } /* COLUMN SETUP */ .col { display: inline-block; vertical-align: top; margin: 1% 0 1% 1.6%; font-size: 1rem; } .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 { width: 100%; } .span_7_of_8 { width: 87.3%; } .span_6_of_8 { width: 74.6%; } .span_5_of_8 { width: 61.9%; } .span_4_of_8 { width: 49.2%; } .span_3_of_8 { width: 36.5%; } .span_2_of_8 { width: 23.8%; } .span_1_of_8 { width: 11.1%; } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 4000px) { .col { margin: 1% 0 1% 0%; } .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) { .col { margin: 1% 0 1% 0%; } .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) { .col { margin: 1% 0 1% 0%; } .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%; } }
<div class="section group"> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> <div class="col span_1_of_8"> <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> </div> </div>
响应式网格（高度问题）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.