我如何使用display: inline-block创建一个带有文字和图片的div,并使它们成为响应式的。

问题描述 投票:0回答:1

所以我创建了一个带有图片和文字的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>

我希望它保持这样的顺序布局

html css layout flexbox css-selectors
1个回答
1
投票

你可以做这样的事情,你仍然可以使用 flex 来完成这项工作。

摆弄 来玩转。

 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>
© www.soinside.com 2019 - 2024. All rights reserved.