图片旁边的文字与移动设备上堆叠的文字

Question

我无法让文字和图片在移动设备上响应。

这就是我所拥有的 HTML：

<div class="split-content" style="width:50%; background-color: #ffffff; background: -webkit-linear-gradient(bottom, #FAFAFA, #ffffff ); height: 212.5;max-width: 300px; display: inline-block;float:left">

Lorem Ipsum dolor sit amet consectetur Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem commodi。

还有 CSS：

<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<style>
  body {
    font-family: 'Lato', San serif;
    Font-weight: 300;
    letter-spacing: 0.5px;
  }
  .headers {
    Font-weight: 700 !important;
  }
  .heads {
  letter-spacing: 3px !important;
  Font-weight: 700 !important;
  }
  .blog {
  letter-spacing: 0.6px !important;
  Font-weight: 400 !important;
  }
</style>

我希望这些图片显示在移动设备上的文字之上

有人可以帮帮我吗？

Answer 1

我有一个答案，您可以在这种方法中使用浮点值，并使用媒体查询在移动分辨率中设置为无浮点值，这与您希望在顶部查看图像并为移动分辨率查看文本相同。请检查示例。

代码

.break {
  clear:both;
  display:block;
}
.right{ 
  float:right;
  width: 50%;
  height: 200px;
}
.left{ 
  float:left;
  width: 50%;
  height: 200px;
}
@media (max-width:767px){ .left, .right { float:none;}}

<div class="split-content" style="">
    <div class="right"><img src="https://dummyimage.com/200x200/000/fff"/></div>
    <div class="left">testtesttesttesttesttesttesttest</div>
    
    <div class="break"></div>
    
    <div class="left"><img src="https://dummyimage.com/200x200/000/fff"/></div>
    <div class="right">testtesttesttesttesttesttesttest</div>
    
    <div class="break"></div>
 </div>

Answer 2

这是我在我的网站中针对类似情况使用的解决方案
如果您使用 flex-box 显示进行内容对齐和换行，那么您可以添加 CSS order 属性来指定对齐的元素顺序我已经用该属性修改了以前的答案代码看看
有不明白的地方请留言...

.content{
  width: 50%;
  float:left;
  height: 200px;
}
@media (max-width:760px){
   .second{ order:1;}
  .first{ order:2;}
  .content{
    width: 90%;
    float: none;
  }
}

<div class="split-content" >
  <div style="display:flex; flex-wrap:wrap">
   <div class="content first">testtesttesttesttesttesttesttest</div>
    <div class="content second"><img src="https://dummyimage.com/200x200/000/fff"/></div></div>
    <div class="content"><img src="https://dummyimage.com/200x200/000/fff"/></div>
    <div class="content">testtesttesttesttest</div> 
    <div></div>
 </div>

这是 codepen 链接，您可以查看和编辑它以阐明我的程序 https://codepen.io/anon/pen/RZqEoy?editors=1100
请原谅我，codepen 不工作
正如您所说，您是初学者，然后通过 flex 框显示属性，您可以使用 flex 框显示使您的网站线框完美对齐。谢谢...