所以我创建了一个带有图片和文字的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>
我希望它保持这样的顺序布局
你可以做这样的事情,你仍然可以使用 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>