javascript - 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> 

您取消 float ，按钮将保留在 div 中。