Jquery 如何在同一行中具有两列的全宽

当我的屏幕超过700px时，如何使我的两列在同一行中？

• 右栏的最大宽度为600px，左栏的最大宽度为屏幕的其余部分？
  
  

当屏幕小于700px时
-我希望我的两列100%宽，一列在另一列之上

这是我更新的JSFIDDLE：www.JSFIDDLE.net/kodjoe/uwkbn5nd/6/

试试这个：

<style>
#right {
 width:600px;
 height:100px;
 float:right;
 background:#8f8;
}
#left {
 height:100px;
 margin-right:600px;
 float:none;
 overflow:hidden;
 background:#ff8;
}
@media (max-width: 700px) {
#right, #left {
 margin:0;
 float:left;
 width:100%;
}
}
</style>
<div id="right">
Some text for the right column
</div>
<div id="left">
Some text for the left column
</div>

#对{
宽度：600px；
高度：100px；
浮动：对；
背景：#8f8；
}
#左{
高度：100px；
右边距：600px；
浮动：无；
溢出：隐藏；
背景:#ff8；
}
@介质（最大宽度：700px）{
#右，#左{
保证金：0；
浮动：左；
宽度：100%；
}
}
右栏的一些文本
左列的一些文本

但是，如果右边的列具有固定的宽度：600px，而不是最大宽度：600px，则它可以工作。我会这样做

div.fullwidth{
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding:0 600px 0 0;
    position:relative;
}
div.left{
    width:100%;
    height:100%;
    background-color:#f00;
}
div.right{
    width:600px;
    height:100%;
    right:0px;
    top:0px;
    position:absolute;
    background-color:#0f0;
}
@media (max-width:700px){
    div.fullwidth{
        padding:0;
    }
    div.right{
        position:relative;
        right:auto;
        top:auto;
        width:100%;
    }
}

并将.left和.right元素（我使用了类，当然可以使用ID）包装到父元素中

<div class="fullwidth">
    <div class="left"></div>
    <div class="right"></div>
</div>

---

这将为您提供所需的行为。

代码已编辑，这是我的链接，您需要删除%20@eranotzapTry添加一些代码，一个工作的小提琴将很有帮助我用您的一部分想法更新了我的，您认为可以吗->我不知道JSFIDLE的结果窗口宽度小于700px。尝试在电脑上创建一个简单的test.html页面