javascript - 创建与网站类似的容器

Question

我试图在我的网站上显示类似这样的内容:

• 3 张圆形图片并排放置
• 在每张图片下方居中的标题(“ready”、“add”、“zap”)

• 每张图片下方居中的内容文本(“制作你自己的...”、“...”)

• 两个按钮在三个图像的宽度上居中

我很确定我必须使用 display: flex 但因为我对 flex 完全陌生，所以我真的不知道如何创建一个容器，就像您在顶部图片中看到的那样。

这是我到目前为止得到的代码(它还没有完成，但我不知道如何继续) - 所以任何帮助都会非常感激。 :)

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  display: flex;
  flex-direction: column;
}


#container>div>img {
  max-width:80%;
}

<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
</div>

Answer 1

我会将每一列包装在一个带有 text-align: center 的 div 中:

#container {
  display: flex;
  flex-direction: row;
  /* line up divs in a row (ie make the inner divs columns */
  flex-wrap: wrap;
  /* allows the columns to wrap to the next row */
  justify-content: space-between;
  /* adds space in between the columns that fit on the same line */
}

.column {
  flex-basis: 30%;
  /* 30% allows 5% space between each top row column */
  text-align: center;
  /* centre inner content of column */
}

.column img {
  max-width: 100%;
}

.context {
  flex-basis: 100%;
  padding: 1em 0;
  /* 48% allows 4% space between buttons */
  text-align: center;
}

.button {
  flex-basis: 48%;
  /* 48% allows 4% space between buttons */
  text-align: center;
  border: 1px solid black;
}

<div id="container">
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 1</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 2</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 3</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="context">lots of centered text can goe here or just delete this if not needed!</div>
  <div class="button left">button 1</div>
  <div class="button right">button 1</div>
</div>