每個div低於前一個，沒有邊距或填充問題

使用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%; 
}

任何建議？由於

來源

2016-07-15 Damir

如果使用inline-block，請確保你有這樣的CSS聲明：

vertical-align: top

這樣，一切都被在div的頂部對齊。如果需要的話，你總是可以使用邊距或填充來減少壓力。

希望這能解決你需要的東西！

來源

2016-07-15 16:46:27

試過這種解決方案，可悲的是沒有運氣。由於我通過WordPress生成內容，因此無法在每個div上單獨應用邊距或填充。任何其他想法？ – Damir

@Damir如何在父容器上使用'display：flex'？這自動對齊內聯的所有內容，併爲我工作。 –

您有col-md-4嵌套在col-md-12下。你不能像這樣嵌套列。你需要在兩行之間。這是不正確的Bootstrap。

<div class="row"> 
    <div class"col-md-12"> 
    <div class="row"> 
     <div class="col-md-4"> 
     <p>Blah Blah</p> 
     </div> 
     <div class="col-md-4"> 
     <p>Blah Blah</p> 
     </div> 
     <div class="col-md-4"> 
     <p>Blah Blah</p> 
     </div> 
    </div> 
    </div> 
</div>

來源

2016-07-15 21:55:15

有時最簡單的解決方案是最合乎邏輯的解決方案。

我發現每篇文章下都有一個<br>標籤，這導致每篇文章被推下來。

來源

2016-07-18 09:27:17 Damir

每個div低於前一個，沒有邊距或填充問題

回答

相關問題