如何使用 display: inline-block 并排创建带有文本和图像的 div 并使其具有响应性答案

【问题标题】：How do I create a div with text and an image side by side using display: inline-block and make them responsive如何使用 display: inline-block 并排创建带有文本和图像的 div 并使其具有响应性
【发布时间】：2020-05-13 11:59:15
【问题描述】：

所以我创建了一个带有图像和文本的 div，我希望它们并排，当分辨率更改为移动设备时，我希望它按以下顺序排列：图像优先，图像下方的文本.

我开发的代码是这样的：

<body>
  <div class = "container">
    <img src = "" style = "border: 1px solid black" height = "200" width = "200" />
<h2> test </h2>
    <p> </p>
  </div>
</div>

<style>
    div.container {
      display: inline-block;
    }

    P {
      text-align: center;
    }
  </style>
</body>

我希望它保持这种状态 layout

【问题讨论】：

弹性盒子怎么样？不想用？

标签： html css layout flexbox css-selectors

【解决方案1】：

你可以这样做，你仍然可以使用flex 来完成这项工作。

fiddle 玩游戏。

 div.container, h2 {
      display: inline-block;
   
    }

<body>
  <div class = "container">
    <img src = "http://placekitten.com/301/301" style = "border: 1px solid black" height = "200" width = "200" />
<h2> test </h2>
    <p> </p>
  </div>


</body>

【讨论】：