javascript - 如何在移动 View jquery中调整div

Question

如何在移动设备上调整布局。

例如:我的布局以替代模式显示信息，一面是图片，另一面是文本。像这样

图片-文字

文字-图片

图片-文字

文字-图片

但目前它在移动端显示的布局是这样的

正文

图片

图片

正文

文字.....

我想在移动端显示为:

图片

正文

图片

文本....

为了解决这个问题:我用jquery编码，这是我的代码:

jQuery(document).ready(function($) {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera //Mini  /i.test(navigator.userAgent) ) {
 jQuery(".picture-div").css({"float": "left"}); 
 jQuery(".text-div").css({"float": "right"});
 }
});

Answer 1

使用 CSS 媒体查询比依赖 Javascript 更简单。

按如下方式重新配置您的 HTML

Picture - Text

Picture - Text

Picture - Text

Picture - Text

然后 float 交替行以出现在每行的相对侧。然后在移动设备上，您只需将宽度设置为 100%，它们就会按照所需的顺序显示

一个例子:

HTML

 <div class="row row-even">
      <div class="picture">Picture</div>
      <div class="text">Text</div>
 </div>

 <div class="row row-odd">
      <div class="picture">Picture</div>
      <div class="text">Text</div>
 </div>

 <div class="row row-even">
      <div class="picture">Picture</div>
      <div class="text">Text</div>
 </div>

 <div class="row row-odd">
      <div class="picture">Picture</div>
      <div class="text">Text</div>
 </div>

CSS

 .row {
      float: left;
      width: 100%;
 }
 .row div {
      width: 50%;
 }
 .row-even .picture, .row-odd text {
      float: left;
 }
 .row-odd .picture, .row-even text {
      float: right;
 }

 @media only screen and (max-width:768px) {
      .row div {
           width: 100%;     
      }    
 }