3
我目前正在構建一個內容持有者，該內容持有者將用於我們擁有的新文章/新聞。HTML/CSS內容持有者
但是我正面臨一個問題，其內容的底部落在<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">
\t <p style="font-size:20px"><b>This is a test title!</b></p>
\t \t <div class="post-materials clearfix">
\t \t <span>
\t \t <img src="images/photo-bg.png" width="20" height="20" alt="Name placeholder Image">
\t \t <span class="material-font"> by</span>
\t \t <span class="author-name">
\t \t <a href="meet-the-team.html" rel="author" title="author profile">
\t \t Joe Bloggs
\t \t </a>
\t \t </span>
\t \t </span>
\t \t </div>
\t \t <br>
\t \t
<img class="image" src="images/blue.jpg"> \t \t
\t <br>
\t \t \t \t \t \t 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. \t \t \t
\t \t \t \t \t \t \t
<div class="post-content-blog"></div>
<div class="continue-reading pull-left">
\t <a class="button" href="#">Read More</a>
</div>
\t \t \t \t \t \t \t
<div class="blog-classic-share pull-right clearfix">
\t <div class="pull-left"><a class="open-share" href=""></a></div>
\t \t <div class="pull-left share-wrapper">
\t \t \t <div class="share-tools pull-left">
\t \t \t <ul>
\t \t \t <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>
\t \t \t <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>
\t \t \t <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>
\t \t \t <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>
\t \t \t </ul>
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>得到任何幫助。
我相信這是由於按鈕和鏈接上有「左拉」和「右拉」的事實，我認爲這是使用CSS「float」屬性。這會使其行爲有所不同。你可能可以在你的外部div上放置一個「左拉」來修復它，但這可能會產生其他效果。 – Andy