Question

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

Answer 1

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

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

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

<div id="website-examples">

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

Fiddle here ...（来自@MichaelCoker）

列数中的元素定位混乱

1 个答案: