HTML / CSS内容持有人

Question

我目前正在建立一个内容持有者，它将用于我们拥有的新文章/新闻。

但是我遇到的问题是内容的底部落在<div>之外。

目前的情况如下：

因此，您可以在底部看到，“阅读更多”和社交图标已从主<div>中删除。

我认为这可能与我CSS的这一部分有关，但我无法弄清楚它为何会脱落......

.timeline-item {
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 12px;
    margin: 0 auto;
    max-width: 672px;
    min-height: 200px;
}

请在下面找到我的CSS和html代码：

.timeline-item {
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 12px;
    margin: 0 auto;
    max-width: 672px;
    min-height: 200px;
}
.blog-classic-share a {
display: inline-block;
margin-top: 14px;
font-size: 11px;
color: #ff0a60;
}
.tag-title-post {
font-weight: 700;
color: #333;
font-size: 13px;
padding-left: 5px;
}
.share-wrapper {
height: 50px;
overflow: hidden;
}
.share-wrapper .share-tools ul {
padding-top: 2px;
}
.share-tools ul li {
float: left;
color: #d6d6d6;
font-size: 12px;
}
.share-tools i {
font-size: 13px;
}
.share-tools ul li:first-child{
padding-left: 20px;
}
.share-tools ul li:after {
content: "|";
padding-left: 20px;
padding-right: 20px;
}
.share-tools ul li:last-child:after {
display: none;
}
.share-tools ul li:before {
display: none;
}
.post-content {
padding: 0 25px;
text-align: justify;
margin-top: 30px;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.post-content p {
padding: 10px 0;
}
.post-content-blog {
border-bottom: solid 1px #e8e8e8;
padding-bottom: 30px;
}

.image {
max-width: 100%;
max-height: 100%;
}

.button {
    background-color: #555555;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<div class="timeline-item">
	<p style="font-size:20px"><b>This is a test title!</b></p>
		<div class="post-materials clearfix">
		<span>
		<img src="images/photo-bg.png" width="20" height="20" alt="Name placeholder Image">
		<span class="material-font"> by</span>
		<span class="author-name">
		<a href="meet-the-team.html" rel="author" title="author profile">
		Joe Bloggs
		</a>
		</span>
		</span>
		</div>
		<br>
		
<img class="image" src="images/blue.jpg">		
	<br>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.			
							
<div class="post-content-blog"></div>

<div class="continue-reading pull-left">
	<a class="button" href="#">Read More</a>
</div>
							
<div class="blog-classic-share pull-right clearfix">
	<div class="pull-left"><a class="open-share" href=""></a></div>
		<div class="pull-left share-wrapper">
			<div class="share-tools pull-left">
			<ul>
			<li><a href="http://www.facebook.com/sharer.php?u=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Facebook"><img src="images/facebook-icon.png" width="20" height="20" alt="Facebook Share Icon"></a></li>
			<li><a href="http://twitter.com/share?url=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Twitter"><img src="images/twitter-icon.png" width="20" height="20" alt="Twitter Share Icon"></a></li>
			<li><a href="http://pinterest.com/pin/create/button/?source_url=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Pinterest"><img src="images/pinterest-icon.png" width="20" height="20" alt="Pinterest Share Icon"></a></li>
			<li><a href="https://plus.google.com/share?url=" onclick="javascript:window.open(this.href, &#39;&#39;, &#39;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&#39;);return false;" target="_blank" title="Share on Google Plus"><img src="images/google-plus-icon.png" width="20" height="20" alt="Google Plus Share Icon"></a></li>
			</ul>
			</div>
			</div>
			</div>
			</div>

感谢任何帮助。

Answer 1

在带有模具按钮的部分之后，您必须添加：

<div class="clearfix"></div> 

取消浮动，按钮将保留在div内。

Answer 2

在clearfix容器中添加timeline-item类，以防止浮动的pull-left儿童流到外面。