html - 我正在尝试将 <img> 彼此对齐，然后将 <h2> 对齐，然后是 <p> 和 laSTLy <a>

Question

我正在尝试以表格格式对齐部分区域，但我似乎无法弄清楚。有没有可能在这方面提供帮助？

我已经在 w3 上搜索了指南并在此处也进行了检查。我并排搜索对齐元素。

#art1,
#art2,
#art3 {
  box-sizing: border - box;
  display: grid;
  grid-template - columns: repeat(auto - fit, minmax(320 px, 1 fr));
  text-align: center;
}

.articlePics {
  width: 15e m;
  border: 1 px solid black;
  align-items: center;
  float: left;
}

.articleHeadings {
  display: grid;
}

<section>
  <article id="art1">
    <img src="images/ITPic.jpg" class="articlePics" alt="InformationTechnology" />
    <h2 class="articleHeadings">Information Technology</h2>
    <p>My overview</p>
    <a href="" class="moreButton">More</a>
  </article>
  <article id="art2">
    <img src="images/biology.jpg" class="articlePics" alt="biology" />
    <h2 class="articleHeadings">Biology</h2>
    <p>My overview</p>
    <a href="" class="moreButton">More</a>
  </article>
  <article id="art3">
    <img src="images/history.jpg" class="articlePics" alt="History" />
    <h2 class="articleHeadings">History</h2>
    <p>My overview</p>
    <a href="" class="moreButton">More</a>
  </article>
</section>

我需要并排对齐三张图片，显示在每张图片下方的 h2 文本，h2 元素下方的 p 元素以及每张图片右上角的按钮。我还想像图片一样在周围放置边框 end result .

Answer 1

你可以使用 flexbox 来连续显示 3 个 article

#section {
  display: flex;
}
#section > article {
  border: 1px solid black;
}
#art1,
#art2,
#art3 {
  box-sizing: border - box;
  display: grid;
  grid-template - columns: repeat(auto - fit, minmax(320 px, 1 fr));
  text-align: center;
}

.articlePics {
  width: 15e m;
  border: 1 px solid black;
  align-items: center;
  float: left;
}

.articleHeadings {
  display: grid;
}

<section id="section">
  <article id="art1">
    <img src="images/ITPic.jpg" class="articlePics" alt="InformationTechnology" />
    <h2 class="articleHeadings">Information Technology</h2>
    <p>My overview</p>
    <a href="" class="moreButton">More</a>
  </article>
  <article id="art2">
    <img src="images/biology.jpg" class="articlePics" alt="biology" />
    <h2 class="articleHeadings">Biology</h2>
    <p>My overview</p>
    <a href="" class="moreButton">More</a>
  </article>
  <article id="art3">
    <img src="images/history.jpg" class="articlePics" alt="History" />
    <h2 class="articleHeadings">History</h2>
    <p>My overview</p>
    <a href="" class="moreButton">More</a>
  </article>
</section>