在列計數中的元素定位被搞砸了

我正在嘗試使用CSS屬性來正確對齊<div>中的文章元素。我有三篇文章元素，其中會包含舊網站的圖片和說明以及標題。但是，正如您在下面的代碼中看到的那樣，<div>的標題和我要排隊的元素位於同一行。我希望標題在文章上方。 [編輯爲清楚起見]在列計數中的元素定位被搞砸了

HTML

<div id="website-examples"> 

    <h1 class="section-header">Site Examples</h1> 

    <a href="#" title="Post 1"> 
    <article> 
     <p>djsalkjadslgkjasdgljdg dsgkjlds;lgjdslkgjdslg jasd;lg dslgkj dslgj sljgs a</p> 
     <figure> 
     <img src="http://www.border7.com/blog/wp-content/uploads/2012/07/HTML.png"> 
     <figcaption>Original Homepage</figcaption> 
     </figure> 
    </article> 
    </a> 
    <a href="#" title="Post 2"> 
    <article> 
     <p>djsalkjadslgkjasdgljdg dsgkjlds;lgjdslkgjdslg jasd;lg dslgkj dslgj sljgs a</p> 
     <figure> 
     <img src="http://www.border7.com/blog/wp-content/uploads/2012/07/HTML.png"> 
     <figcaption>Original Homepage</figcaption> 
     </figure> 
    </article> 
    </a> 
    <br> 
    <a href="#" title="Post 3"> 
    <article> 
     <p>djsalkjadslgkjasdgljdg dsgkjlds;lgjdslkgjdslg jasd;lg dslgkj dslgj sljgs a</p> 
     <figure> 
     <img src="http://www.border7.com/blog/wp-content/uploads/2012/07/HTML.png"> 
     <figcaption>Original Homepage</figcaption> 
     </figure> 
    </article> 
    </a> 
</div>

CSS

#website-examples { 
    background-color: rgba(240, 237, 237, .5); 
    padding: 3% 10%; 
    column-width: 220px; 
    column-count: 3; 
    column-gap: 30px; 
    display: flex; 
    height: 500px; 
} 

#website-examples h1 { 
    margin-top: -30px; 
    margin-bottom: 100px; 
    width: 100%; 
} 

#website-examples a[title] { 
    text-decoration: none; 
    padding: 1rem; 
    color: #424242; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .25); 
    display: inline-block; 
    height: 50%; 
} 

a[title] figure img { 
    width: 100%; 
    height: auto; 
}

這裏是的jsfiddle：

https://jsfiddle.net/cjbruin/yp8b05qh/

來源

2017-05-23 Colin Bruin

什麼重疊？我沒有看到任何重疊的東西......你可以製作截圖嗎？你在'＃website-examples'上使用'flex'和'column'。我認爲這是問題的一部分。你需要選擇一個或另一個:) –

@Micheal Coker對不起，我不是說重疊，而是我想要文章欄上方的標題，而不是在同一行上 –

最簡單的解決方法就是將'h1'移動到' ＃website-examples' https://jsfiddle.net/yp8b05qh/1/否則你需要在'＃website-examples'上設置'flex-wrap：wrap'，但是那麼你的列元素會被搞亂https：// jsfiddle .net/yp8b05qh/2/ –

我看不出有重疊，但作爲你的評論，你想要的文章列上方的標題，而不是山姆e線。

至於什麼@MichaelCoker曾表示，你應該移動#website-examples標記上方h1標籤：

<h1 class="section-header">Site Examples</h1> 

<div id="website-examples"> 

--- some code here ... ---

Fiddle here ...（由@MichaelCoker）

來源

2017-05-23 02:54:49

在列計數中的元素定位被搞砸了

回答

相關問題