如何使图像在移动文本下运行

Question

如何使图像在移动中的文本下运行？如果这样做有意义的话，文本应该放在左边，而不是在右边。)

CSS (图像)： https://pastebin.com/pGBdbBhs

CSS (内容)： https://pastebin.com/1SY2JXUa

HTML:

<div class="content">
  <div class="left-200">
    <div>
      <h3>Lorem ipsum</h3>
      <div class="padding-4"></div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
     </div>
    
     <div class="padding-10"></div>
     <img src="./images/default-image.png" alt="Image" class="image"/>
   </div>
 </div>

桌面：

​

​

手机：

​

​

谢谢!

Answer 1

我解决了！基本上，我把它封装在一个div中，如果设备是移动的，就设置display:none;。我在桌面上也做了同样的事情！

Answer 2

要进行响应性设计，可以选择引导根，也可以在CSS中执行@media。看看这个网站，它会给你指明正确的方向。

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

您的CSS和HTML看起来有些随意。例如，那些填充的div。您的.left-200类还有两个显示属性。我建议把它清理干净，然后再加上垫子，毛边等。

对于此任务，您实际上只需要display: flex和flex-wrap，并相应地设置其他值，如width。

.content {
    padding: 200px 50px;
    display: flex;
    flex-wrap: wrap;
}
#flex-text {
    width: 400px;
}

<div class="content">
        <div id="flex-text">
            <h3>Lorem ipsum</h3>
            p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
                -->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
        </div>
        <div id="flex-image"> <img  src="./images/default-image.png" alt="Image" class="image"/> </div>
    </div>