列数中的元素定位搞砸了答案

【问题标题】：Element positioning in column-count is messed up列数中的元素定位搞砸了
【发布时间】：2017-08-24 23:36:59
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

什么重叠？我没有看到任何重叠的东西……你能截图吗？你在#website-examples 上使用flex 和column。我假设这是问题的一部分。你需要选择一个或另一个:)
@Micheal Coker 抱歉，我的意思不是重叠，而是我想要文章列上方的标题，而不是在同一行
最简单的解决方法就是将h1 移动到#website-examples 上方jsfiddle.net/yp8b05qh/1 否则你需要在#website-examples 上设置flex-wrap: wrap 但是你的列元素被搞砸了jsfiddle.net/yp8b05qh/2
谢谢你，我试图避免这种情况，但它似乎是唯一合理的解决方案！

标签： css html css-multicolumn-layout

【解决方案1】：

我没有看到重叠，但是在您的 cmets 中，您希望标题在文章列上方，而不是在同一行。

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

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

<div id="website-examples">

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

Fiddle here ...（@MichaelCoker）

【讨论】：