动态排列与其他div相关的div

Question

我有一个页面，我加载了6篇博文， 我有一个按钮，可以加载更多博客文章。

一篇博客文章如下：

在页面加载时它看起来很好，但是在我按下Load More button后，样式消失了，它看起来像这样：

以下是我正在使用的代码。我为图像，标题和内容使用单独的div - s，并且出于某种原因，当按下Load More按钮并加载新帖子时，对于新帖子，样式不是好。能否请您提供一些示例，说明如何安排与divs相关的div？我可以在没有javascript的情况下执行此操作，在这种情况下使用纯css我需要javascript吗？谢谢！

＆＃13;

＆＃13;

.loop-entry:hover {
    box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
}
.loop-entry-thumbnail {
	max-height: 150px;
	overflow: hidden;
}
.loop-entry-case-study-thumbnail {
	width: 100%;
    max-height: 175px;
    overflow: hidden;
    margin: 0 auto;
}
.loop-entry-title {
	max-height: 115px;
	padding-bottom: 20px;
}

.loop-entry-excerpt h3{
  margin-top: -12px !important;
}

.loop-entry-excerpt h3 span{
     margin-top: 28px !important; 
}

.loop-entry-excerpt p,
.loop-entry-excerpt h3
{
  margin-top: 90px;
  color: rgb(119, 119, 119) !important;
  font-family: "Oswald" !important;
  font-size: 1.1em !important;
  font-weight: 700;
  line-height: 23.8px;  
  overflow: hidden;
  /* max-height: 150px;*/
}

.page-id-61 .loop-entry-title {
	font-weight:bold;
	font-size: 30px;
	position: absolute;
	/*top: 50px;*/
}
.loop-entry-content {
    padding: 0px 30px 0 30px;
    /*color: #777;*/
    box-sizing: border-box;
    color: rgb(119, 119, 119);
	font-family: "Oswald";
	font-size: 15.4px;
	font-weight: 700;
	line-height: 23.8px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
}
.blog-posts img {
	height: 175px;
	width: 350px;
}

＆＃13;

 <div class="contact_con blog-posts">
                    
                        <div class="loop-entry-thumbnail">
                            <a href="http://staging.princetonpartners.com/marketing-millennials-dont-trust-stereotypes/" title="Marketing to Millennials: Don’t Trust the Stereotypes">
                                <img src="http://staging.princetonpartners.com/wp-content/uploads/shutterstock_404838631.jpg" alt="Marketing to Millennials: Don’t Trust the Stereotypes" title="Marketing to Millennials: Don’t Trust the Stereotypes" width="100%">
                            </a>
                        </div>

                         <div class="loop-entry-content clr" style="position: relative;">
                            <header>
                                <h2 class="loop-entry-title entry-title">
                                    <a href="http://staging.princetonpartners.com/marketing-millennials-dont-trust-stereotypes/">Marketing to Millennials: Don’t Trust ...</a>
                                </h2>
                            </header>
            
                            <div class="loop-entry-excerpt entry clr" style="/*! top: 73px; *//*! margin-top: 40px; */position: absolute;">
                                Today’s modern market looks drastically different than it used to, whether it be th...<br>
                                <span class="home_readmore"><a href="http://staging.princetonpartners.com/marketing-millennials-dont-trust-stereotypes/">Read more</a></span>
                            </div>
                        </div>
                        
                    </div>

＆＃13;

＆＃13;

＆＃13;