Question

<div class="full-width">
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>

这是我的代码，当窗口小于859px时，我想更改为div框的位置。我想这样：

<div class="full-width">
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>

我该如何使用jQuery代码？

Answer 1

实际上这很容易。只要屏幕小于859像素，就可以将“float：right”添加到“content-inner”。

我在这里贴了一个小提琴 https://jsfiddle.net/q2x5xsu0/

@media screen and (max-width: 859px) {
    .content-inner {
      float: right;

    }
}

Answer 2

首先你需要像这样检查窗口大小

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

然后更改你的位置

Answer 3

write the "JavaScript":

<body onload="fnChange()">
<div class="full-width">
<div class="content-inner vc_col-sm-5" id="dvSmall">
    <p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7" id="dvBig">
    <img src="imageher.jpg" alt="big image">
</div>
</body>
=>Javascript code:
<script>
function fnChange()
{
if(screen.width < 859)
{
$("#dvSmall").insertAfter("#dvBig");
}
}
</script>

Answer 4

查看$ .resize（）api：https://api.jquery.com/resize/

您可以使用$（window）.width（）;

获取窗口大小

所以把它们放在一起

<div class="full-width">
<div class="content-inner vc_col-sm-5">
    <p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
    <img src="imageher.jpg" alt="big image">
</div>

<script>
    $(window).resize(function() {
        var w = $(window).width();
        if(w < 859) {
            //make changes for small configuration
        } else {
            //make changes for large configuration
        }

    });
</script>

使用jQuery更改div框的位置

4 个答案: