Blogger模板發佈縮略圖有時互相重疊，如果它們加載速度不夠快

Question

如果我的發佈縮略圖加載速度不夠快，我的後縮略圖的整個響應版面會變得混亂，需要刷新。是否有可能添加一個代碼，告訴它仍然加載適當的空間，即使圖像還沒有完成加載，或者可能是一個代碼讓它加載佔位符圖像，直到真實的加載？下面是一些代碼和毛刺的截圖。網站可以在http://centerice.frozenfaceoff.net/

/* CSS Post Thumbnail */ 
.post img{display:block;width:100%;height:100%;cursor:default;} 
.img-thumbnail {background:#f9f9f9;position:relative;float:left;width:100%;height:100%;margin:0 auto;padding:0;} 
.img-thumbnail img {width:100%;height:100%;margin:0 auto;} 
span.overlay {background:rgba(0,0,0,0);cursor:pointer;position:absolute;right:0;left:0; 
bottom:0;top:0;z-index:1;opacity:1;width:100%;height:100%;transition:all .3s linear;} 
span.overlay:hover {background:rgba(0,0,0,0.25);opacity:1;transition:all .3s linear;} 
span.overlay:before {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;font-size: 24px;width:24px;height:24px;top:50%;left:50%;margin:-20px;padding:10px;position:absolute;color:rgba(255,255,255,0.0);-ms-transform: scale(1.6);-webkit-transform: scale(1.6);-moz-transform: scale(1.6);transform: scale(1.6);transition:all .3s linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear;} 
span.overlay:hover:before {color:rgba(255,255,255,0.6);text-shadow:0 0 3px rgba(0,0,0,0.2);-ms-transform: scale(1.0);-webkit-transform: scale(1.0);-moz-transform: scale(1.0);transform: scale(1.0);transition:all .3s linear;-moz-transition:all .3s linear;-webkit-transition:all .3s linear;} 

發現這裏是.POST-外的代碼。我試圖將其改爲float：none，但這並沒有解決問題。

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<style type='text/css'> 
#wrapper{overflow:hidden;width:1100px;max-width:100%;margin:0 auto;margin-top:0;} 
#post-wrap{margin-top:20px;margin-bottom:20px;} 
.blog-posts{margin-bottom:20px;} 
#part-aside{width:1100px;max-width:100%;margin:0 auto;} 
.post{background:#fff;position:relative;padding:10px;margin:10px;border-bottom:2px solid #dcdcdc;} 
.post-outer{width:25%;float:left;position:relative;overflow:hidden;display:block;margin:0 auto;} 
.post-body {display:none;max-width:100%;line-height:1.6em;color:#999;margin:15px auto;font-size:11px;text-overflow:ellipsis;text-align:center;} 
.post h2.post-title {white-space:nowrap;min-height:100%;bottom:0;width:100%;padding:0;margin:0 auto;background:transparent;position:relative;text-decoration:none;transition:all .2s ease-in-out;} 
h2.post-title span a{color:#D24647;} 
.post:hover h2.post-title {z-index:2;color:#d76c58;transition:all .2s ease-in-out;} 
h2.post-title a {overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:13px;display:block;line-height:20px;font-weight:bold;letter-spacing:0.5px;background:#fff;color:#999;padding:0px 0;border-bottom:1px solid #f5f5f5;transition:all .3s ease-in-out;} 
h2.post-title a:hover{color:#D24647;} 
.post:hover h2.post-title a{color:#D24647;} 

Answer 1

問題是由float和財產上post-outer選擇器引起的。更改float屬性如下 -

.post-outer { 
    float: none; 
}