（我知道这个问题在很多情况下都有很好的记录，但我似乎无法找到解决方法。）
问题是朝向页面底部的弹性框元素高度不足 - 可能是因为这些元素中的图像加载缓慢。
以下是一个示例：http://paleomagazine.com/paleo-websites-bloggers/
如果向下滚动到该页面的第3行或第4行，您会看到由于高度不足而将元素一起按下。
我在下面包含了我的代码，但作为前言，我尝试通过CSS和JS做了很多事情，包括（a）使用CSS转换和（b）尝试强制JS重绘（更改） display，offsetHeight，甚至webkitTransform）。这些都没有奏效（如果你查看页面，你可以看到它目前仍在实施）。
.custom-cat1 section.bSe {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.custom-cat1 section.bSe article.no-flex {
flex-basis: 100%;
margin-bottom: 0;
}
.custom-cat1 section.bSe article.gdl {
flex-basis: 30%;
margin: 1rem .4rem;
box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}
.custom-cat1 section.bSe article.gdl .recipe-link-cover {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
height: 100%;
}
.custom-cat1 .bSe article .awr {
border: none;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
height: 100%;
padding-bottom: 15px;
}
.custom-cat1 .gdl h2.entry-title {
font-size: 1.2em !important;
margin-top: 0 !important;
color: #444444;
}
.custom-cat1 .bSe article img {
width: 100%;
height: auto;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto 10px auto;
overflow: visible;
}
.custom-cat1 .bSe article img:hover,
.custom-cat1 .gdl h2.entry-title:hover {
opacity: 0.8;
transform: scale(1.04);
}
.custom-cat1 .bSe article .awr p {
margin: 0 !important;
line-height: 1.1em !important;
}<div class="wrp cnt gin custom-cat1">
<section class="bSe fullWidth">
<article class="no-flex">
<p id="breadcrumbs"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://paleomagazine.com/" rel="v:url" property="v:title">Home</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://paleomagazine.com/paleo-diet/" rel="v:url" property="v:title">Paleo Diet</a> » <strong class="breadcrumb_last">Paleo Websites and Bloggers</strong></span></span></span></p>
<div class="category-title">
<h1><span>Paleo Websites and Bloggers</span></h1>
</div>
<div class="subheader-optin">
<p>Ready to Get Started? <a><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;">Get Our Free 4-Week Paleo Meal Plan</span></a></p>
</div>
</article>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">Blogger Spotlight – Eileen Laird</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-eileen-laird"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-–-Eileen-Laird.jpg" alt="Blogger Spotlight – Eileen Laird" title="Blogger Spotlight – Eileen Laird"></a>
<p>Eileen Laird is the founder of Phoenix Helix and author of A Simple Guide to the Paleo Autoimmune... <a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">Blogger Spotlight – Kaylie Johnson</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-Kaylie-Johnson.jpg" alt="Blogger Spotlight - Kaylie Johnson" title="Blogger Spotlight - Kaylie Johnson"></a>
<p>Kaylie Johnson is the founder of Joyful Bite, where she shares her Paleo journey and amazing... <a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">Blogger Spotlight – Stefani Ruper</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-stefani-ruper"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Stefani-Ruper.jpg" alt="Blogger Spotlight - Stefani Ruper" title="Blogger Spotlight - Stefani Ruper"></a>
<p>1. What got you interested in the Paleo lifestyle? Back in 2009, I was a vegetarian on the verge of... <a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-mark-sisson">Blogger Spotlight – Mark Sisson</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-mark-sisson"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/10/Blogger-Spotlight-Mark-Sisson.jpg" alt="Blogger Spotlight - Mark Sisson" title="Blogger Spotlight - Mark Sisson"></a>
<p>1. What got you interested in the Paleo lifestyle? I was going through a major reevaluation of my... <a href="http://paleomagazine.com/paleo-blogger-mark-sisson">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-sarah-pope">Blogger Spotlight – Sarah Pope</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-sarah-pope"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Sarah-Pope.jpg" alt="Blogger Spotlight - Sarah Pope" title="Blogger Spotlight - Sarah Pope"></a>
<p>1. What got you interested in the whole foods lifestyle? The first big motivator was my... <a href="http://paleomagazine.com/paleo-blogger-sarah-pope">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">Paleo Restaurant Feature: Shine Restaurant & Gathering Place</a></h2>
<a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/11/Paleo-Restaurant-Feature-Shine-Restaurant-Gathering-Place1.jpg" alt="Paleo Restaurant Feature: Shine Restaurant & Gathering Place" title="Paleo Restaurant Feature: Shine Restaurant & Gathering Place"></a>
<p>Shine Restaurant & Gathering Place in Boulder Colorado is owned by triplet sisters, Jennifer,... <a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">Blogger Spotlight – Leslie Auman</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-leslie-auman"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Leslie-Auman.jpg" alt="Blogger Spotlight - Leslie Auman" title="Blogger Spotlight - Leslie Auman"></a>
<p>Leslie Auman is the owner and founder of The Whole Life Balance. You can follow her on Instagram,... <a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">Blogger Spotlight – Jessica Furniss</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Blogger-Spotlight-Jessica-Furniss.jpg" alt="Blogger Spotlight - Jessica Furniss" title="Blogger Spotlight - Jessica Furniss"></a>
<p>Jessica Furniss is the author behind Spiffy Eats & Giggle Water. You can follow her on... <a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">Blogger Spotlight – Ainsley Daschofsky</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-–-Ainsley-Daschofsky.jpg" alt="Blogger Spotlight - Ainsley Daschofsky" title="Blogger Spotlight – Ainsley Daschofsky"></a>
<p>1. What got you interested in the Paleo lifestyle? Oddly, the life train stopped at the low carb... <a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-chris-kresser">Blogger Spotlight – Chris Kresser</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-chris-kresser"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-Chris-Kresser.jpg" alt="Blogger Spotlight - Chris Kresser" title="Blogger Spotlight - Chris Kresser"></a>
<p>1. What got you interested in the Paleo lifestyle? I suffered from a decade-long, debilitating... <a href="http://paleomagazine.com/paleo-blogger-chris-kresser">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">Blogger Spotlight – Mary Herrington</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-mary-herrington"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Mary-Herrington.jpg" alt="Blogger Spotlight – Mary Herrington" title="Blogger Spotlight – Mary Herrington"></a>
<p>1. What got you interested in the Paleo lifestyle? What got me interested in the Paleo lifestyle is... <a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">Blogger Spotlight – Danielle Gagnon</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Danielle-Gagnon.jpg" alt="Blogger Spotlight - Danielle Gagnon" title="Blogger Spotlight - Danielle Gagnon"></a>
<p>1. What got you interested in the Paleo lifestyle? I spent most of my college and post-grad years... <a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/natures-palette-for-perfect-health">Nature’s Palette for Perfect Health</a></h2>
<a href="http://paleomagazine.com/natures-palette-for-perfect-health"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Natures-Palette-for-Perfect-Health.jpg" alt="Nature's Palette for Perfect Health" title="Nature's Palette for Perfect Health"></a>
<p>Jayson Calton, PhD and Mira Calton, CN are the founders of Calton Nutrition and the authors of... <a href="http://paleomagazine.com/natures-palette-for-perfect-health">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/interview-with-george-bryant">Interview with George Bryant – Civilized Caveman</a></h2>
<a href="http://paleomagazine.com/interview-with-george-bryant"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/04/george-bryant-featured-image.jpg" alt="george bryant featured image" title="george bryant featured image"></a>
<p>George Bryant of Civilized Caveman is one of our favorite people in Paleo – he’s... <a href="http://paleomagazine.com/interview-with-george-bryant">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">Favorite Bloggers: Empowered Sustenance</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance"><img class="fwI" width="630" height="630" src="http://paleomagazine.com/wp-content/uploads/2014/12/lauren-geertsen.jpg" alt="lauren geertsen - empowered sustenance" title="lauren geertsen - empowered sustenance"></a>
<p>The Blog Empowered Sustenance The Blogger Lauren Geertsen Her Story Lauren, although still very... <a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">more</a></p>
</div>
</article>
<div class="spr"></div>
<div class="clear"></div>
<div class="awr ctr pgn">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">2</a>
<a class="next page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">Next »</a>
</div>
<div class="bspr"></div>
<div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
<div class="custom-category-description"></div>
<div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
<div class="category-page-bottom-optins">
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', '7-Day Challenge', {'nonInteraction': 1});">
<span class="tve-leads-two-step-trigger tl-2step-trigger-25371" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/challenge-optin.jpeg" height="300" width="300"></span>
</a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', '7-Day Challenge', {'nonInteraction': 1});">
</div>
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Favorite 11 Recipes', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-16874" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/favorite-paleo-recipes.jpg" height="300" width="300"></span></a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Favorite 11 Recipes', {'nonInteraction': 1});">
</div>
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Meal Plan', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/meal-plan-optin.jpeg" height="300" width="300"></span></a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Meal Plan', {'nonInteraction': 1});">
</div>
</div>
</section>
</div>
非常感谢任何帮助或建议。
答案 0 :(得分：1)
在图片上定义width和height属性。这应该有助于浏览器render page correctly before loading image content。
示例HTML将更改为以下
<article class="gdl left" style="height: 656px;">
<div class="awr">
<h2 class="entry-title">
<a href="http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">10-Minute Paleo Cinnamon Raisin Toast Recipe</a>
</h2>
<div class="fwit">
<a class="pst" href="http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">
<img class="fwI"
src="http://paleomagazine.com/wp-content/uploads/2016/12/Paleo-Cinnamon-Raisin-Toast-Recipe-1.jpg"
width="800"
height="1200"
alt="Paleo Cinnamon Raisin Toast Recipe #paleo #recipe http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe"
title="Paleo Cinnamon Raisin Toast Recipe #paleo #recipe http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">
</a>
</div>
This is a quick and easy Paleo cinnamon raisin toast recipe. It’s perfect as a delicious...<a href="http://paleomagazine.com/paleo-cinnamon-raisin-toast-recipe">more</a>
</div>
</article>