Question

我正在尝试以表格格式对齐节区域，但是我似乎无法弄清楚。有可能为此提供协助吗？

我已经搜索了w3的指南，并在此处进行了检查。我并排搜索了align元素。

#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>

Answer 2

太棒了，谢谢，我从没想过要向该部分添加ID。非常感谢。

我试图将<img>彼此对齐，然后将<h2>对齐，然后是<p>对齐，最后是<a>

2 个答案: