0

所以我有 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 像素及以上）时彼此相邻，并且当屏幕变得小于所需分辨率时地图<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是一个方向元素，因为它是页面显示区域的整个宽度。

由于地图<div>的宽度始终相同，因此是否有比我的更聪明的方法来获得所需的效果。@media 不是我要找的，因为它仅受最近的浏览器支持。

编辑：

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

新代码是： 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 值……有人知道如何解决这个问题吗？

这个小提琴展示了当固定元素和相对元素被切换时它是如何做的（固定元素在左边，相对在右边）：http: //jsfiddle.net/hJzJf/

但我需要反过来。

4

2 回答 2

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/

于 2013-09-09T19:34:33.800 回答
0 
@media all and (min-width:600px){
    div{
        display:inline;
        margin-left:/*some amount*/
    }       
}

@media all and (max-width:599px){
    div{
        display:block;
    }       
}
于 2013-09-06T17:57:39.397 回答