Question

我试图更改移动设备上浮动列的浮动顺序。尝试将浮动更改为无并清除它们但它不起作用。使用Sass编译代码很好。无法看到我出错的地方。感谢

我需要移动布局如下：

文本
图像
文字
图像

HTML：

var phonenumber = "9994";

var numberok = true;
var numberstr = "0123456789";

for (var i = 0; i < phonenumber.length; i++) {
  var char = phonenumber.charAt(i);
  // In modern browsers could also be written as:
  // var char = phonenumber[i];

  if (numberstr.indexOf(char) === -1) {
    numberok = false;
    break;
  }
}


if (numberok) {
    alert("Phone number is good");
} else {
  alert("Enter Correct Phone Number");
}

CSS：

<div class="half">
        <div class="inner-right text-block">
            <h3 class="black">Lorem Ipsum</h3>
            <div class="spacer"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum doloribus laborum harum non? Quod omnis nemo, doloribus fuga, perferendis sed officiis magnam magni adipisci. Odio fugiat, libero asperiores aut iure?</p>
        </div>
    </div>
    <div class="half">
        <img src="http://dummyimage.com/600x450/000/fff" role="img" alt="">
    </div>
    <!-- One half half -->
    <div class="half">
        <img src="http://dummyimage.com/600x450/000/fff" role="img" alt="">
    </div>
    <div class="half">
        <div class="inner-right text-block">
            <h3 class="black">Lorem Ipsum</h3>
            <div class="spacer"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum doloribus laborum harum non? Quod omnis nemo, doloribus fuga, perferendis sed officiis magnam magni adipisci. Odio fugiat, libero asperiores aut iure?</p>
        </div>
    </div>

小提琴是：https://jsfiddle.net/jxhdyjks/1/

Answer 1

这是一个小提琴：https://jsfiddle.net/tw0akjjj/

我改变了两件事：

1。）将媒体查询置于其他规则之下，因为左侧和右侧类将覆盖它，否则

2.。）为图像（.half img）添加了规则，使其（响应，更改）容器内的宽度为100％

ADDITION /编辑：

请注意更新的小提琴：https://jsfiddle.net/tw0akjjj/2/

我转向HTML中第二行的DIV顺序，并将第二行中的DIV设置为float: right。

在桌面版本中，这变为

text image
image text

在移动版中：

text
image
text
image

CSS移动更改浮动顺序

1 个答案: