jquery - 根据屏幕大小调整 div 位置

Question

所以我有 2 <div>元素，一个带有标题和一段文本，另一个带有谷歌地图。

HTML:

<div id="info">
    <h1>TITLE</h1>
    <p>
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    </p>
</div>
<div id="map-canvas"></div>

我想要 <div>在屏幕足够大(大约 600 像素及以上)和 map 时元素并排放置 <div>转到文本下方 <div>当屏幕变得比所需分辨率小时。

目前我通过 jQuery 有一个非常丑陋的解决方案，如下所示:

function resize(){
    var windowSize = $(window).width();
    if (windowSize < 768){
        $('#info').css('width','100%');
        $('#info').css('float','');
    }
    else{
        var width = $('#naviTable').width() - 350; 
        $('#info').css('width',width);
        $('#info').css('float','left');
    }
}

#navi-table是一个方向元素，因为它是页面显示区域的整个宽度。

自 map <div>总是相同的宽度是否有比我的更聪明的方法来获得所需的效果。 @media 不是我要找的，因为它只被最近的浏览器支持。

编辑:

我已经设法通过使用 display:flex 在一定程度上解决了这个问题。 CSS 中的属性，但这显示出新的问题。

新代码是: HTML:

<div id="info-box">
<div id="info">
<h1>TITLE</h1>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
<table id="mapTable"><tr><td>
<div id="map-canvas"></div>
</td></tr><tr><td>
<h2 id="mapLink">TEXT TEXT...</h2>
</td></tr></table>
</div>

并在 css 中添加:

#info-box{display:flex;}
#info{width:100%;}
#mapTable{width:300px;}

这次没有 JS。

问题是 IE 不理解显示属性中的 flex 值...有人知道如何解决这个问题吗？

这个 fiddle 展示了当固定元素和相对元素切换时它是如何工作的(固定元素在左边，相对元素在右边):http://jsfiddle.net/hJzJf/

但我需要反过来。

Answer 1

#left {
    background: #f00;
    height: 200px;
}
#right {
    overflow: hidden;
    background: #0f0;
    height: 200px;
}

@media all and (min-width:600px){
    #left {
        float: left;
        width: 180px;
    }
    #right {
        margin-left: 180px;
    }
}

演示:http://jsfiddle.net/hJzJf/117/