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

Question

我正在基于 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>

标签： cssflexboxmultiple-columns

Answer 1

添加/更新了以下样式

* {
  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>