Blogger 템플릿 게시 미리보기 이미지가 가끔로드되지 않는 경우 서로 겹치기 때때로

Question

내 게시물 미리보기 이미지가 빨리로드되지 않으면 내 미리보기 이미지의 전체 반응 레이아웃이 엉망이되어 새로 고침이 필요합니다. 이미지로드가 완료되지 않았거나 실제 코드가로드 될 때까지 자리 표시 자 이미지를로드하는 코드가있는 경우에도 여전히 적절한 공간을로드하도록 지시하는 코드를 추가 할 수 있습니까? 아래는 결함의 일부 코드와 스크린 샷입니다. 사이트는 여기 .post-외부의 코드는 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;} 

에서 찾을 수 있습니다. 나는 이것을 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

문제는 post-outer 셀렉터 float 및 특성에 기인한다. 다음과 같이 float 속성을 변경 -

.post-outer { 
    float: none; 
}