響應式網格高度調整問題
[英]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.