使用Bootstrap3創建自定義WordPress主題。每個div低於前一個,沒有邊距或填充問題
我的divs表現得很荒謬,因爲我可能錯過了一些東西。我嘗試了各種解決方案,如顯示器:內聯,垂直對齊:頂部,浮動和清除等...但沒有任何工作。
這是我目前的樣子,一切都應該是內聯:
這裏是我當前的代碼:
<div class="container content">
<!-- CONTENT -->
<div class="col-md-12 blog-posts">
<article class="single-article col-md-4">
<a href="myweb.com/blog/tempus-non-auctor/">
<img width="300" height="300" src="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg" class="img-responsive wp-post-image" alt="team4" srcset="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg 300w, myweb.com/wp-content/uploads/2016/07/team4-150x150.jpg 150w, myweb.com/wp-content/uploads/2016/07/team4.jpg 573w" sizes="(max-width: 300px) 100vw, 300px"> </a>
<h1 class="article-headline"><a href="myweb.com/blog/tempus-non-auctor/">tempus non, auctor</a></h1>
<h4 class="article-time-stamp"><i>Posted on July 15th, 2016</i></h4>
<p></p><p>Etiam sit amet orci eget eros faucibus tincidunt. In hac habitasse platea dictumst. Aenean commodo ligula eget dolor. Vivamus in erat ut urna cursus vestibulum. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce fermentum. Etiam feugiat lorem non metus. Suspendisse feugiat. Praesent congue erat at massa.<br><a class="moretag hvr-pop" href="myweb.com/blog/tempus-non-auctor/"><i>Read more</i></a></p>
<p></p> </article>
</div> <!-- end blog posts part -->
<!--END content wrapper -->
</div>
和css:
.single-article {
padding-bottom: 10%;
em {
font-style: italic;
}
}
.article-headline {
padding-bottom: 2%;
a {
color: $purple-color;
}
}
.article-time-stamp {
font-size: 1em;
padding-bottom: 1%;
}
任何建議?由於
試過這種解決方案,可悲的是沒有運氣。由於我通過WordPress生成內容,因此無法在每個div上單獨應用邊距或填充。任何其他想法? – Damir
@Damir如何在父容器上使用'display:flex'?這自動對齊內聯的所有內容,併爲我工作。 –