如何在桌面模式下并排放置图像但在移动设备上的文本上方放置图像？答案

【问题标题】：How to place image side by side on desktop mode but image above the text on Mobile?如何在桌面模式下并排放置图像但在移动设备上的文本上方放置图像？
【发布时间】：2018-04-25 18:34:10
【问题描述】：

我想在我的网站上添加一张图片，使其以最大分辨率向左浮动，即； @media (max-width:1200px) 但在移动设备模式下，它应该位于文本之上，即； @media (max-width:360px)

如下图

这里的行代表文本，(image) 代表图像。

【问题讨论】：

标签： css responsive-design css-float responsive mobile-website

【解决方案1】：

试试这个

@media only screen and (min-width: 576px) {}

告诉我它是否有效！

【讨论】：

【解决方案2】：

您可以将此 css 用于图像。此外，图像旁边的其他元素将具有与最大宽度 1200 像素相同的 css。

@media (max-width: 1200px) {
    img {
        display: inline-block;
        width: 50%;
    }
}

@media (max-width: 360px) {
    img {
        display: block;
        width: 100%;
    }
}

【讨论】：

【解决方案3】：

Hope it will work for you

<style>
    @media screen and (max-width: 1200px) {
    img {
        display: inline-block;
        width: 50%;
        float: right;
    }
}

@media screen and (max-width: 360px) {
    img {
        display: block;
        width: 100%;
    }
}

</style>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<img src="https://www.imageupload.co.uk/images/2018/04/25/PicsArt_04-25-08.29.07.png" alt="Pineapple"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

【讨论】：

帮了我很多，谢谢