css - 如何使4列中包含图像和文字，并在同一行中为每列设置链接？

我正在基于PSD文件创建网站。我想使用flexbox布局创建网站。

我不知道如何在flexbox中制作4列以便能够很好地包装。

我想在图像上做类似的事情：

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.resources {
  background-color: #a2ca28;
}

.info {
  padding-top: 40px;
  padding-bottom: 40px;
}

.info > * {
  flex-basis: 20%;
  padding: 20px;
}

.info article img {
  height: 4em;
}

.info article h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 54.1px;
}

.info article p {
  font-family: "Proxima Nova";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

 <section class='resources'>
            <div class='container info'>
                    <article>
                        <img src="./images/resources.png" >
                        <h2>Resources</h2>
                        <p>Donec porttitor augue sit amet est posuere facilisis. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac
                            turpis egestas. Fusce malesuada ipsum augue, quis viverra orci ultricies
                            at. Etiam commodo purus nisi. Aenean vestibulum mi in mi consequat, vel semper orci efficitur.</p>
                            <a href='#'>Explore more</a>
                    </article>
                    <article>
                        <img src="./images/trainingfunding.png" >
                        <h2>Training &#38; Funding </h2>
                        <p>Quisque vel ultrices elit. Phasellus nunc libero, dictum id purus a,
                            semper volutpat arcu. Integer pretium, tortor at facilisis sollicitudin,
                            ex velit faucibus dolor, ut finibus dolor neque at odio.</p>
                            <a href='#'>Explore more</a>
                    </article>
                    <article>
                        <img src="./images/connect.png" >
                        <h2>Connect</h2>
                        <p>Quisque quis nulla dignissim, consectetur libero sed, semper risus.
                            Quisque tincidunt, elit sit amet volutpat tincidunt, velit dolor
                            varius nisl, ut tristique orci diam et elit. Nam congue sem nunc,
                            ac fermentum leo consectetur in. </p>
                            <a href='#'>Explore more</a>
                    </article>
                    <article>
                        <img src="./images/communicate.png" >
                        <h2>Communicate</h2>
                        <p>Maecenas sit amet felis et leo consectetur efficitur.
                            Vestibulum gravida felis nec malesuada pulvinar.</p>
                        <a href='#'>Explore more</a>
                    </article>
            </div>
        </section>

最佳答案

添加/更新了以下样式

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.container article {
  width: 25%;
  padding: 10px;
  position: relative;
}

article a {
  position: absolute;
  bottom: 0;
}

@media (max-width: 900px) {
  .container article {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .container article {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.resources {
  background-color: #a2ca28;
}

.info {
  padding-top: 40px;
  padding-bottom: 40px;
}

.container article {
  width: 25%;
  padding: 10px;
  position: relative;
}

article a {
  position: absolute;
  bottom: 0;
}

.info article img {
  height: 4em;
}

.info article h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 54.1px;
}

.info article p {
  font-family: "Proxima Nova";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

@media (max-width: 900px) {
  .container article {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .container article {
    width: 100%;
  }
}

<section class='resources'>
  <div class='container info'>
    <article>
      <img src="./images/resources.png">
      <h2>Resources</h2>
      <p>Donec porttitor augue sit amet est posuere facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada ipsum augue, quis viverra orci ultricies at. Etiam commodo purus nisi. Aenean vestibulum
        mi in mi consequat, vel semper orci efficitur.</p>
      <a href='#'>Explore more</a>
    </article>
    <article>
      <img src="./images/trainingfunding.png">
      <h2>Training &#38; Funding </h2>
      <p>Quisque vel ultrices elit. Phasellus nunc libero, dictum id purus a, semper volutpat arcu. Integer pretium, tortor at facilisis sollicitudin, ex velit faucibus dolor, ut finibus dolor neque at odio.</p>
      <a href='#'>Explore more</a>
    </article>
    <article>
      <img src="./images/connect.png">
      <h2>Connect</h2>
      <p>Quisque quis nulla dignissim, consectetur libero sed, semper risus. Quisque tincidunt, elit sit amet volutpat tincidunt, velit dolor varius nisl, ut tristique orci diam et elit. Nam congue sem nunc, ac fermentum leo consectetur in. </p>
      <a href='#'>Explore more</a>
    </article>
    <article>
      <img src="./images/communicate.png">
      <h2>Communicate</h2>
      <p>Maecenas sit amet felis et leo consectetur efficitur. Vestibulum gravida felis nec malesuada pulvinar.</p>
      <a href='#'>Explore more</a>
    </article>
  </div>
</section>

关于css - 如何使4列中包含图像和文字，并在同一行中为每列设置链接？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51442876/