html - 在移动设备上堆叠的水平框 - 以图像、标题文本和详细信息文本为中心

Question

在概念化如何着手制作这组盒子时遇到困难。它们需要水平居中，但堆叠在较小的屏幕尺寸上。还需要居中图像和两种类型的文本。感谢您的想法!

我目前拥有的: 需要从一个主容器开始并将所有 4 个盒子放在里面。不确定如何在较小的屏幕上获得水平显示或堆叠功能。也不确定如何将每个框内的内容居中 - 不确定我应该在框内使用静态格式还是动态格式。

Answer 1

如果您不想走 Bootstrap (或其他网格布局)路线，我建议您使用 flex 和媒体查询。

HTML:

<div class="wrapper">
  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>

  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>

  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>

  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>
</div>

CSS:

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

.box {
  width: 100%;
  padding: 10px;
  text-align: center;
  border: 1px solid black;
}

.image {
  display: inline-block;
  background: black;
  color: white;
  padding: 10px;
}

@media (min-width: 600px) {
  .wrapper {
    flex-direction: row;
  }

  .box {
    width: auto;
    flex-grow: 1;
  }

}

https://codepen.io/anon/pen/GvMPQe