使用jQuery更改div框的位置
[英]Change position of a div box with jQuery
问题描述
<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>
This is my code, and when window with is smaller than 859px I want to change to possistion of the div boxes. 
这是我的代码，当window小于859px时，我想更改为div框的位置。 I want to have the this way: 我想这样：
<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>
How do I that jQuery code ? 我该如何jQuery代码？
4 个解决方案
解决方案1
1 2017-11-24 10:28:01
It's actually really easy. 这实际上非常容易。 Just add "float: right" to the "content-inner" as soon as your screen is smaller than 859px. 只要屏幕小于859px，只需在“内容内部”添加“ float：right”即可。
I posted a fiddle here https://jsfiddle.net/q2x5xsu0/ 我在这里https://jsfiddle.net/q2x5xsu0/
@media screen and (max-width: 859px) {
.content-inner {
float: right;
}
}
解决方案2
0 2017-11-24 10:29:03
first you need to check window size like this 首先，您需要检查这样的窗口大小
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
and then change your postion 然后改变你的位置
解决方案3
0 2017-11-24 10:51:13
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>
解决方案4
-1 2017-11-24 10:31:24
Look at the $.resize() api: https://api.jquery.com/resize/ 查看$ .resize（）api： https : //api.jquery.com/resize/
You can get the window size with $(window).width(); 您可以使用$（window）.width（）;获取窗口大小。
So putting that all together 所以把所有东西放在一起
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.