column-count 中的元素定位混乱

Question

我正在尝试使用 CSS 属性正确对齐 <div> 中的文章元素。我有三个文章元素，它们将包含一个旧网站的图像和一个描述以及一个标题。但是，正如您将在下面的代码中看到的那样，<div> 的 header 和我想要排列的元素位于同一行。我希望 header 位于文章上方。 [为清楚起见进行了编辑]

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/

Answer 1

我没有看到重叠，但在您的评论中，您希望 header 位于文章栏上方，而不是在同一行。

正如@MichaelCoker 所说，您应该将 h1 标签移到 #website-examples 标签上方：

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

<div id="website-examples">

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

Fiddle here ...（来自@MichaelCoker）

column-count 中的元素定位混乱

Element positioning in column-count is messed up

html

css

css-multicolumn-layout