图 - figcaption - 响应式网站答案

【问题标题】：figure - figcaption - responsive website图 - figcaption - 响应式网站
【发布时间】：2018-09-29 18:22:30
【问题描述】：

抱歉，这看起来很简单，但我似乎无法成功。

我只想要一个完全一样的网站：

我希望它响应迅速，在平板电脑和智能手机上也能正常工作/看起来不错。

我已经尝试了所有方法，但似乎没有任何效果。

到目前为止，我想出了这个：

<div id="container">		
  <h1>title</h1>
  <div id="grid">
    <figure id="r">
      <img src="http://placehold.it/300x200" alt="">
        <figcaption>caption</figcaption>
    </figure>	

    <figure id="p">
      <img src="http://placehold.it/300x200" alt="">
        <figcaption>caption</figcaption>
    </figure>

    <figure id="c">
      <img src="http://placehold.it/300x200" alt="">
        <figcaption>caption</figcaption>
    </figure>

    <figure id="s">
      <img src="http://placehold.it/300x200" alt="">
        <figcaption>caption</figcaption>
    </figure>
  </div>
</div>

我对 html/css 缺乏经验，但明天需要它。也许你可以帮助我，或者发布一个例子，也许是一个类似于我想要的网站。非常感谢。

【问题讨论】：

这个例子可能会有所帮助：codepen.io/bradfrost/full/GlrHv
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
请查看 Stack Overflow 上的How to ask 问题以及can be asked 的问题类型和should be avoided. 的问题类型

标签： html css responsive-design

【解决方案1】：

您可以使用 Flexbox 和 @media查询：

* {box-sizing: border-box}
body {margin: 0}

#container {
  width: 1200px; /* adjust */
  max-width: 100%; /* responsiveness */
  margin: 0 auto; /* horizontally centered on the page */
  padding: 0 5px; /* adjust */
}

h1 {text-align: center}

#flex {
  display: flex; /* displays flex-items (children) inline */
  flex-wrap: wrap; /* enables their wrapping */
  margin: 0;
}

figure {
  display: flex; /* flex behavior also for figure elements */
  flex-direction: column; /* stacks flex-items vertically */
  justify-content: center; /* centers them vertically */
  align-items: center; /* and horizontally */
  flex: 0 1 calc(50% - 10px); /* initial width set to 50% - 10px (2 x 5px left & right padding) of the flex-container's (#flex) width */
  margin: 5px; /* adjust */
}

img {
  display: block; /* removes bottom margin/whitespace */
  max-width: 100%; /* responsiveness */
}

@media (max-width: 568px) { /* adjust */
  #flex {flex-direction: column}
}

<div id="container">		
  <h1>title</h1>
  <div id="flex">
    <figure id="r">
      <img src="http://placehold.it/400x300" alt="">
      <figcaption>caption</figcaption>
    </figure>	

    <figure id="p">
      <img src="http://placehold.it/400x300" alt="">
      <figcaption>caption</figcaption>
    </figure>

    <figure id="c">
      <img src="http://placehold.it/400x300" alt="">
      <figcaption>caption</figcaption>
    </figure>

    <figure id="s">
      <img src="http://placehold.it/400x300" alt="">
      <figcaption>caption</figcaption>
    </figure>
  </div>
</div>

【讨论】：