响应式网格高度调整问题
[英]responsive grid height adjustment issue
问题描述
I am a bit of a novice with HTML and CSS. 
我是HTML和CSS的新手。 I have borrowed some code for a responsive grid online and adapted it to my needs. 我已经在网上借用了一些用于响应式网格的代码，并使其适应了我的需求。
My issue is that inside my columns there is text that is responding to the browser size and the columns with more text are breaking the column height and throwing the grid out of place. 我的问题是，在我的列中有文本响应浏览器的大小，而包含更多文本的列破坏了列的高度并使网格错位。
What I'm looking for is that when one column's text is larger than the other in the same row, that the height for all columns in the row adjust accordingly, instead of just the column with the most text changing the height first and then breaking the grid. 我要寻找的是，当一列的文本大于同一行中的另一列的文本时，该行中所有列的高度都会相应调整，而不是仅文本最多的列先更改高度然后断开网格。
The HTML and CSS are below. HTML和CSS如下。 Thanks for your help. 谢谢你的帮助。
<!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 s are the guilty property. float是有罪财产。 Please, avoid floats in the year 2016 to layout. 请避免在2016年进行花车布置。 It's arcaic. 太古了。 If you change the float with inline-block it works perfectly. 如果使用内联块更改浮动，则效果最佳。
/* 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.
相关问题
响应式网格（高度问题） - Responsive grid (height issue)
在CSS网格单元中适当调整高度 - proper height adjustment in css grid cell
响应式网格高度问题 - Responsive Grid Height Issues
多张图片高度调整问题 CSS - Multiple images height adjustment issue CSS
div问题的响应高度 - Responsive height of div issue
Bootstrap响应高度问题 - Bootstrap responsive height issue
Bootstrap响应式网格问题 - Bootstrap responsive grid issue
根据html中li标签的高度调整div的高度 - Height adjustment issue of div according to the height of li tag in html
响应式网格项目中的问题 - Issue in responsive grid item
响应图像网格上的动态高度？ - Dynamic Height on Responsive Image Grid?
相关标签