Javascript 调整窗口大小时，如何更改div的左边距？

我想在调整窗口大小时，将红色边框div放置在绿色边框所在的左侧。
目前，div具有以下css规则：

#twitter-2 { 
width: 332px; 
background-color: #7E7D7D; 
opacity: 0.6; 
margin-left:525px; 
margin-top:-142px; 
}

我解决了这个问题：

window.onresize = function(event) {
    var elem = document.getElementById("twitter-2");
    elem.setAttribute("style","margin: 20px 1px;");
}

---

您可以使用媒体查询

并通过重新调整窗口大小来测试您的站点

调整您想要在哪个设备上玩的内容，并始终尝试使用%而不是px

一些媒体的问题

试一试

CSS

.red { 
    width: 332px; 
    background-color: #7E7D7D; 
    opacity: 0.6; 
    margin-left:525px; 
    margin-top:-142px; 
}

.green { 
    width: 332px; 
    background-color: #7E7D7D; 
    opacity: 0.6; 
    margin-left:25px; 
    margin-top:-342px; 
}

假设当前您的

twitter-2 div

有

class red

在

window.resize函数上

$(window).resize(function(){
   $('#twitter-2').addClass('green').removeClass('red');
});

您还可以根据需要为不同的

宽度
进行此操作

阅读
只要把整条线放在一个容器上，而不是左右浮动，当空间太小时，盒子就会自然沉到下面

<div class="row">
    <div class="follow">keep in touch</div>
    <div class="tweet-update">bla bla</div>
</div>

.follow {float:left; margin-bottom:30px;}
.tweet-update {float:right}


保持联络
布拉布拉
.follow{float:左；边距底部：30px；}
.tweet更新{float:right}
红色边框在右侧，您的意思是希望绿色边框显示在红色边框框右侧的位置吗？另外，也请发布您的HTML。@Lowkase我想他的意思是当页面宽度减小时，将以红色突出显示的div移动到以绿色边框突出显示的位置。对不起，我想将红色边框div放在3个按钮下面，绿色边框的位置。@lliescu Alex-请发布您的HTML以及任何相关CSS。您能创建此链接的JSFIDLE链接以便我们进行测试吗？这对我来说很有效：window.onresize=function（event）{var elem=document.getElementById（“twitter-2”）；elem.setAttribute（“style”，“margin:20px 1px；”）
<div class="row">
    <div class="follow">keep in touch</div>
    <div class="tweet-update">bla bla</div>
</div>

.follow {float:left; margin-bottom:30px;}
.tweet-update {float:right}