我正在构建一个内容容器，用于存放我们的新文章/新闻。
但是我遇到了一个问题，就是内容底部超出了 <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代码：
请查看下方我的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, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');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, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');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, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');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, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');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>感激任何帮助。
pull-left和pull-right，我认为这是使用了 CSS 的float属性。这将使它的行为不同。你可能可以在外部 div 上放置一个pull-left来修复它，但这可能会产生其他影响。 - Andy