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>元素彼此相邻，同时屏幕足够大（大约600px及以上），并且地图<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不是我想要的，因为它只受到最近浏览器的支持。

编辑：

我已经设法通过在CSS中使用display:flex属性来解决问题，但这显示了新的问题。

新代码是： 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并不了解显示属性中的弹性值...任何人都知道如何解决这个问题？

这个小提示显示当固定元素和相对元素被切换时它的母鹿（固定元素是左边的，相对的是右边的）：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;
    }
}

DEMO：http://jsfiddle.net/hJzJf/117/

Answer 2

@media all and (min-width:600px){
    div{
        display:inline;
        margin-left:/*some amount*/
    }       
}

@media all and (max-width:599px){
    div{
        display:block;
    }       
}

用屏幕尺寸调整div位置

2 个答案: