figure - figcaption - 响应式网站

Question

对不起，这看起来很简单，但我似乎无法使其发挥作用。

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

我希望它能够做出响应，在平板电脑和智能手机上工作/看起来很好。

我已经尝试了一切，但似乎没有任何工作。

到目前为止，我提出了这个问题：

<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缺乏经验，但明天需要它。也许你可以帮助我，或发布一个例子，也许是一个类似于我想要的网站。非常感谢你。

Answer 1

您可以使用 Flexbox 和@media 查询执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;